Introduction to Canvas

Different parts of HTML5 were contributed by different browser vendors. It seems only appropriate, that Apple, the company that was so insistent in replacing Flash, contributed the technology that replaced many of Flash's features: the canvas tag.

The canvas tag in HTML5 represents a surface for bitmap drawing. Apple implemented it in Safari, and it was quickly adapted by Firefox and Opera.

On March 14, 2007, Apple's Senior Patent Counsel stated that Apple reserved all intellectual property rights to the canvas tag. This caused an uproar among web developers, and raised questions concerning the inclusion of patten-encumbered technologies in WHATWG standards. For a time, Apple wouldn't relinquish it's patents, leading to discussions about the removal of the canvas tag from the HTML5 standard. Eventually though, Apple relented and agreed to provide royalty-free licensing for the patent when the Canvas element became part of the W3C recommendation created by the HTML working group.

Example Usage

<canvas width="200" height="200">
</canvas>
The two attributes that the canvas tag has are width and height used to describe the canvas size.

Handling Browsers That Don't Support Canvas

In Apple's original implementation, the canvas element didn't have a closing tag. But Firefox and other browsers added one in order to handle browsers that didn't support it-in a manner similar to the usage of noscript. See below.
<canvas width="200" height="200">
    Your browser does not support the canvas element.
</canvas>

It's important to give your canvas element an id since the actual drawing on the canvas is done via JavaScript; we'll start looking at this soon.