HTML canvas globalAlpha attribute
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.0and (completely transparent) 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:
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);
Syntax
context.globalAlpha=number;
Attribute Value
| Value | Description |
|---|---|
| number | Transparency 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 to fully support 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.
