HTML canvas globalAlpha Property

Example

// Accessing the element
let c = document.getElementById("myCanvas");

let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(25, 25, 50, 50);

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

Try this code ❯

Meaning

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

Standard Syntax

Default value:

1.0

JavaScript syntax:

context.globalAlpha=number;

Property Values

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