HTML5 <canvas> Tag

Example

How to display a red square, with the canvas element:

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

Definition and Usage

The <canvas> tag is used to display graphics.

The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

Differences Between HTML 4.01 and HTML5

The <canvas> tag is new in HTML5.

Tips and Notes

Hint: Any text inside the between <canvas> and </canvas> will be displayed in browsers that does not support the canvas element.

Attributes

Attribute Value Description
height pixels Specifies the height of the canvas
width pixels Specifies the width of the canvas

Standard Attributes

The <canvas> tag also supports the Standard Attributes in HTML5.

Event Attributes

The <canvas> tag also supports the Event Attributes in HTML5.

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!