canvas element creates a rectangular area where authors can render graphics and animations programatically and on the fly. This is a valuable resource when designing websites rich in animations and interactivity, or when developing on-page applications and videogames.
From a content author's view, the
Authors are encouraged to provide fallback alternatives to the contents displayed with the
canvas element. These alternatives should be placed inside the element's tags, allowing browsers to hide them when the support for
canvas is present.
The following example shows a
<canvas id="canvas1" height="100"></canvas>
Now a canvas element will be set to provide some interactivity, by allowing the user to draw lines with the mouse pointer. You can test this drawing board by moving the mouse over the canvas while the left click is pressed. If you right-click over the element, the board will be cleared.
<canvas id="canvas2" height="200"></canvas>
The number of pixels to use as the width of the rectangle defined by this element. When this attribute isn't specified, the element's area takes a width of 300 pixels.
The number of pixels to use as the height of the rectangle defined by this the element. When this attribute isn't specified, the element's area takes a height of 150 pixels.
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.