For applications that require shape layering, it's often desirable to work with transparencies. In this recipe, we will learn how to set shape transparencies using the global alpha composite.
Follow these steps to draw a transparent circle on top of an opaque square:
Define a 2D canvas context:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
Draw a rectangle:
// draw rectangle context.beginPath(); context.rect(240, 30, 130, 130); context.fillStyle = "blue"; context.fill();
Set the global alpha of the canvas using the
globalAlpha
property and draw a circle:// draw circle context.globalAlpha = 0.5; // set global alpha context.beginPath(); context.arc(359, 150, 70, 0, 2 * Math.PI, false); context.fillStyle = "red"; context.fill(); };
Embed the canvas tag inside the body of the HTML document:
<canvas id="myCanvas" width="600" height="250...