HTML5 Canvas Composition Exercise

Write code using HTML5 Canvas Composition to draw the following shape.

Solution

The globalCompositeOperation() is a property of HTML5 Canvas 2D API. This property defines how a source image are drawn over a destination image.

In the following code, we are using 'destination-over' composition property to draw the rectangle over the circle.

<!DOCTYPE HTML>
<html>
	<head>
	 <script>
        function drawComposition() {
		   var label = document.createTextNode('destination-over');
		   var ctx = document.getElementById('compo').getContext('2d');
		   //rectangle
		   ctx.fillStyle = "#00AAA0";
		   ctx.fillRect(15,15,70,70);
		   
		   //Set the composition property
		   ctx.globalCompositeOperation = 'destination-over';
		   
		   // circle
		   ctx.fillStyle = "#FF7A5A";
		   ctx.beginPath();
		   ctx.arc(75,75,35,0,Math.PI*2,true);
		   ctx.fill();
		}
	 </script>
	</head>
	<body onload="drawComposition();">
	<canvas id="compo" width="125" height="125"></canvas>
	</body>
</html>

Output of the above code -

In the above code, getContext is a method that returns an object for working on canvas, the fillStyle is a property of canvas and used to fill color gradient in the drawing, the fillRect method is used to draw a filled rectangle, the arc() method creates an arc/curve.

Next Exercise >>