The Canvas Tag

In 2000, all the major browser manufacturers began shipping their software with the Flash plug-in built in. The Flash plug-in allowed designers and developers to define part of their pages for advanced interactivity. Flash was treasured for its ability to deliver advanced animation and interactivity. Scalable Vector Graphics (SVG) also had the capacity to deliver advanced interactivity, but never received general browser support. And there things stagnated for almost a decade, while the browser manufacturers dithered and argued. In the meantime, the Flash community exploded with a wealth of astonishing creativity.

The canvas tag was developed to help address the need. It has a wealth of features and is enjoying fairly good browser support. Most of the major browsers (including IE9) do a fine job of supporting it. As we write this, there is solid support for the 2D drawing API (Application Programming Interface). This means you can dynamically draw into the canvas tag in two dimensions. At some future time, the browsers may also support rendering in three dimensions. Using the canvas tag, you can dynamically draw shapes, use flat fills, gradient fills, pattern fills, strokes, render text, copy images, manipulate video, manipulate pixels, export the content of a canvas tag, and much more.

It's important to realize what the canvas tag does draw and what it doesn't draw. The canvas tag draws bitmaps; it does not draw vectors. The canvas tag is like, well, a canvas. There is no concept of layers. Once you have committed to drawing an element, it becomes part of the canvas. You can't go back and re-jigger the element. As a bitmap, it won't scale well either -- as the drawing is enlarged, you will be able to see the dithering at the edges.