Categories
HTML JavaScript Web development

HTML Canvas global/Alpha property

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

Syntax:

context.globalAlpha=number;

number – the value must be a number between 0.0 (fully transparent) and 1.0 (no transparency).

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="transparency" width="200" height="200" style="border:1px solid #333;"></canvas>

<script>
var c = document.getElementById("transparency");
var ctx = c.getContext("2d");
ctx.fillStyle = "#2a9d8f";
ctx.fillRect(30, 30, 75, 75);
ctx.globalAlpha = 0.4;
ctx.fillStyle = "#e76f51"; 
ctx.fillRect(60, 60, 75, 75); 
ctx.fillStyle = "#e9c46a"; 
ctx.fillRect(90, 90, 75, 75);
</script>

</body>
</html>

Output:


Enjoy coding!