HTML5 Canvas Tutorials

Transparency on Canvas

The globalAlpha sets the transparency value for the compositing operation. However, it is important to note that all drawings will be affected by the globalAlpha value. The attribute takes float values from 0 to 1, with 0 being fully transparent and 1 being fully opaque.

HTML Code

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(25,25,100,50);

//Set the transparency value to 0.5
ctx.globalAlpha = 0.5;

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "green";
ctx.fillRect(60,45,100,50);

}
}
</script>
<title> Compositing on canvas </title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

Note: Try out the other compositing options in the above code to see how they work. Also, note that the globalCompositeOperation attribute affects all drawing on the canvas.

Try Code