Canvas globalAlpha Property

Example

Draw a red rectangle. Set transparency (globalAlpha) to 0.5. Then draw a blue and a green rectangle:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);

// Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);

Try it Yourself »

Description

The globalAlpha property sets or returns the transparency value of the context.

The globalAlpha property value must be a number between 0.0 (Fully transparent) and 1.0 (Default. No transparancy).

Syntax

context.globalAlpha = number

Property Values

Value	Description	Play it
number	The transparency 0.0 = full transparancy 1.0 = no transparancy	Play it »

Browser Support

The <canvas> element is an HTML5 standard (2014).

globalAplha is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference