Summary -

In this topic, we described about the <canvas> tag along with detailed example.

The <canvas> tag is new in HTML5. Used for dynamically creating graphics. The <canvas> tag is used for the same above. The dynamically creating graphics can be achieved by using javascripts.

<canvas> tag will act as a container. The tag can be represented like <canvas id=""></canvas>. The recent versions of the browsers support the <canvas> tag.

Any content in between the <canvas></canvas> tags will display when the browser doesn’t support <canvas> tag which also called as "fallback content".

Syntax -

<canvas>.. text here.. </canvas>

Optional Attributes -

AttributeDescriptionValues
width Specifies width in pixels. Number in pixels. Default value is 300.
height Specifies height in pixels. Number in pixels. Default value is 150.

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> Canvas element example.. </title>
	</head>
	<body>
		<canvas id="square" width="200" height="100" 
		style="border:2px solid #000000;">
    		Browser not supporting canvas tag
		</canvas>
	</body>
</html>

Output -

Browser not supporting canvas tag