Canvas globalAlpha Attribute

Canvas Reference Manual

Definition and Usage

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

globalAlpha The attribute value must be between 0.0(completely transparent) and 1.0between (opaque) and

Example

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

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// Adjust transparency
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

Syntax

Context.globalAlpha=number;

Attribute value

Value Description
number Transparent Value. It must be between 0.0 (fully transparent) and 1.0 (opaque).

Technical Details

Default Value: 1.0

Browser Support

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas Reference Manual