Tutorials References Exercises Videos NEW Menu
Paid Courses Website NEW

HTML canvas globalAlpha Property

❮ HTML Canvas Reference


First, draw a red rectangle, then set transparency (globalAlpha) to 0.5, and then draw a blue and a green rectangle:



var c = document.getElementById("myCanvas");
var ctx = c.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 »

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

font Yes 9.0 Yes Yes Yes

Definition and Usage

The globalAlpha property sets or returns the current alpha or transparency value of the drawing.

The globalAlpha property value must be a number between 0.0 (fully transparent) and 1.0 (no transparancy).

Default value: 1.0
JavaScript syntax: context.globalAlpha=number;

Property Values

Value Description Play it
number The transparency value. Must be a number between 0.0 (fully transparent) and 1.0 (no transparancy) Play it »

❮ HTML Canvas Reference