HTML Canvas – Forget any Flash basics you know

There is lots of noise at the moment around HTML 5, and Canvas is a big part of that. You may expect the Canvas element to be a straight replacement for Flash, but it’s lacking that level of abstraction present in Flash.

The name canvas is literal, the element only acts as a painting area, there is no time-line and objects/graphics are rendered onto the canvas and not stored on it. Once painted on they can be painted over but not moved or modified.

When painting to the canvas we use its context object, functions of which fall into two groups: painting operations and painting settings. For example, if you change the opacity value it will not affect the current canvas content, but it will affect any further painting operations.

The context object can maintain a history of painting settings, with states stored in a last-in, first-out list. Calling save() pushes the current context state to the history, calling restore() pops the last state from the list and resets the context to that state.

The Canvas is for creating dynamic images, so for most applications you’d probably be better off with normal HTML, or even SVG.

Filed under: Uncategorised