Note/Info The <canvas> tag is a new tag added in HTML5.
HTML5 <canvas> tag
Using the HTML5 <canvas> element, you can draw graphics on web page using JavaScript.
You must have basic knowledge on JavaScript to draw graphics.
The <canvas> element is only a container for a 2D Graphics.
By default, <canvas> tag will be blank with no border or content. The default size is 300 * 150 px.
Syntax:
<canvas width=”width-value” height=”height-value”> <script>Add javascript</script></canvas>
Example
<canvas id="myCanvas" width="400" height="200" style="border:2px solid slateblue;"></canvas>
Default CSS Value
height: 150px;
weight: 300px;
How Browser will display
INLINE.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| NA | NA | New tag in HTML5 |
Attributes used with <canvas> tag
| Attribute | Description |
|---|---|
| width | To set the width of the canvas in pixels. |
| height | To set the height of the canvas in pixels. |
Global Attributes
The <canvas> tag supports Global attributes.
Event Attributes
The <canvas> tag supports Event attributes.
Supporting Browsers
Related Tags
<svg>, <script>.