HTML5 Canvas Composition Exercise

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


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.

        function drawComposition() {
		   var label = document.createTextNode('destination-over');
		   var ctx = document.getElementById('compo').getContext('2d');
		   ctx.fillStyle = "#00AAA0";
		   //Set the composition property
		   ctx.globalCompositeOperation = 'destination-over';
		   // circle
		   ctx.fillStyle = "#FF7A5A";
	<body onload="drawComposition();">
	<canvas id="compo" width="125" height="125"></canvas>

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.

Read more articles

General Knowledge

Learn Popular Language