HTML5 Canvas Exercise

Write HTML code to draw the following shape using canvas.

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()
	{
		canvas = document.getElementById("canvasreason");
		context = canvas.getContext("2d");
		var width = 70; var height = 85; var space = 2;
		context.strokeStyle = "blue"; 
		context.lineWidth = 25;
		context.shadowOffsetX = 4; 
		context.shadowOffsetY = 4;
		context.shadowBlur = 5; 
		context.shadowColor = "gray";
		drawShape(5+(2*space)+(2*width), 120, "round");
		
		function drawShape(xStart, yStart, join)
		{
		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>

Output of the above code

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.

Next Exercise >>