HTML5 Canvas Opacity Tutorial

You can change the opacity of any bitmap image in canvas using the globalAlpha attribute.

In this example we will change the background color to white and use two overlapping rectangles of two different colors.

Here is our script

<script>
window.onload = function() {
var canvas=document.getElementById(“drawing”); // grabs the canvas element
var context=canvas.getContext(“2d”); // returns the 2d context object

//blue rectangle
context.fillStyle= “#b0c2f7″;
context.fillRect(10,10,100,50);
}
</script>

Here is what it looks like in the browser

Now let us add the globalAlpha attribute to change the opacity of the blue rectangle.

<script>
window.onload = function() {
var canvas=document.getElementById(“drawing”); // grabs the canvas element
var context=canvas.getContext(“2d”); // returns the 2d context object

//blue rectangle
context.fillStyle= “#b0c2f7″;
context.globalAlpha=0.5; // Half opacity
context.fillRect(10,10,100,50);
}
</script>

Here is what it looks like in the browser