HTML canvas

HTML5 introduced a new HTML element called a canvas. A canvas is placed on the page in a similar way to any other element such as an image or a div element.

However, the unique feature of the canvas is that you can use Javascript code to draw on it. The canvas has a comprehensive set of drawing commands including:

• Simple shapes such as lines, rectangles and circles.
• Complex shapes created from lines, arcs and curves.
• Various line and fill styles for drawing shapes including gradients, dashes and patterns.
• Positioning text and images.
• Tranparency, shadows and clipping.

You can also interact with the mouse to create dynamic graphics, for example selecting, dragging or drawing on the canvas.

Animation is also possible, using standard JavaScript animation support (requestAniFrame).

There are also numerous libraries built on top of the canvas to provide scene based animation, more complex mouse interactions, 3D drawing, tweening and games.

Prequisites

This tutorial assumes you understand basic HTML and a bit of Javascript (although if you have programmed in other languages you will probably be able to muddle through).

See also

• Basic drawing
• Coordinate system
• Colours
• Fill and stroke
• Paths and lines