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!