Q:

Write HTML code to draw the following shape using canvas

belongs to collection: HTML5 programming Exercises

YasminRadwan26
Save to bookmark
|
2022-05-15
|
  232 
0

Write HTML code to draw the following shape using canvas

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

All Answers

YasminRadwan26
2022-05-15
need an explanation for this answer? contact us directly to get an explanation for this answer

Solution

HTML5 canvas element is used to draw graphics, animation, dynamic images, diagram, text to enhance the user experience. <canvas> tag is used to add canvas on the web page. It is pixel based and powered by Javascipt. The canvas area of the web page is accessed by javascript code.

The following code draw the given shape -

<!DOCTYPE HTML> 
<html> 
<head> 
	<script>
	window.onload = function()
	{
		var width = 70;  var space = 2;
		drawShape(5+(2*space)+(2*width), 120, "round");
		
		function drawShape(xStart, yStart, join)
		{
                var height = 85;
		canvas = document.getElementById("canvasreason");
		context = canvas.getContext("2d");
		context.strokeStyle = "blue"; 
		context.lineWidth = 25;
		context.shadowOffsetX = 4; 
		context.shadowOffsetY = 4;
		context.shadowBlur = 5; 
		context.shadowColor = "gray";
		context.lineCap = "round";
		context.beginPath();
		context.moveTo(xStart, yStart);
		context.lineTo(xStart+(width/2), yStart-height);
		context.lineTo(xStart+width, yStart);
		context.lineJoin = join;
		context.stroke();
		}
	}
	</script> 
</head> 
<body>
	<div style="width:500px; height:160px; margin:0 auto; padding:5px;">
	<canvas id = "canvasreason" width = "500" height = "160" >
	Your browser does not support the HTML5 canvas element.
	</canvas> 
	</div> 
</body> 
</html>

Here, the strokeStyle property sets the color, gradient, or pattern used for strokes, the shadowOffsetX property sets the horizontal distance of the shadow from the shape, the shadowOffsetY property sets the vertical distance of the shadow from the shape, the shadowBlur property specifies the level of the blurring effect, the shadowColor property sets the color to use for shadows.

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 code using HTML5 Canvas Composition to draw ...