Q:

Write code using HTML5 Canvas Composition to draw the following shape

belongs to collection: HTML5 programming Exercises

YasminRadwan26
Save to bookmark
|
2022-05-14
|
  292 
0

Write code using HTML5 Canvas Composition to draw the following shape

Html programming,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-14
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)

HTML5 programming Exercises
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
Write HTML code to draw the following shape using ... >>
<< Write the following mathematical expression by usi...