Q:

Write code using HTML5 Canvas Composition to draw the following shape

belongs to collection: HTML5 programming Exercises

0

Write code using HTML5 Canvas Composition to draw the following shape

All Answers

need an explanation for this answer? contact us directly to get an explanation for this answer

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 method 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.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Write HTML code to draw the following shape using ... >>
<< Write the following mathematical expression by usi...