THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas globalAlpha Property

❮ Canvas Object

Example

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

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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.

Property
globalAlpha 4.0 9.0 3.6 4.0 10.1

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 »

❮ Canvas Object