Intro to HTML Canvas Tag

I remember hearing about the Canvas tag some time ago, but until recently I had not given it much thought. However, now we have John Resig using JavaScript and the Canvas tag to compile and render the Processing language (Processing.js), and Jacob Seidelin emulating Mario Kart. I have even read opinion articles claiming that Canvas could replace Flash. Although, that is unlikely, all this buzz portends that Canvas is here to stay and may be a big player in the future of the web. Todays article will address: what the Canvas tag is, who supports it, and a basic example of how you can use it.

What is the Canvas Tag?

The Canvas tag was first introduced by Apple for the Mac OS X Dashboard and later implemented into Safari. Other browsers would follow Safaris lead and eventually WHATWG standardized it for the HTML5 specification, which was recently adopted by the W3C HTML Working Group. At its core Canvas is an HTML Element, inheriting the same DOM attributes as other HTML Elements: class, id, style, etc. It has two optional attributes: width and height; it will default to 300 pixels wide and 150 pixels high, if optional attributes are not included. Canvas was introduced to support 2-dimensional graphic rendering on the web, driven by a scripting language with access to the context of the desired Canvas Element.

Why Should I Care?

Canvas is important because it provides a standard, non-proprietary rendering platform that has been strangely absent on the web. In fact, it is the absence of such a standard technology that spawned proprietary frameworks, such as Flash. In the future, we will probably be able to do full 3-dimensional rendering using OpenGL ES, and I would be surprised if someone does not attempt to write a complete Flash-like engine.

Who Supports Canvas

Unfortunately, not all browsers support Canvas (most notably IE), but most do: FireFox v1.5+, Opera 9+, Safari, and even Konquerer (Bug 108069). As far as I can tell, IE 8 still does not have native support for the Canvas Element, which is sad. Fortunately, Google came to the rescue and has created CanvasExplorer which emulates Canvas in IE using one 50kb JavaScript file. Therefore, after a fashion, all major browsers support Canvas.

However, not each browser supports it in exactly the same way. Safari does not require the closing "</canvas>" tag, where Mozilla does. Mozilla made this decision to be more backwards compatible with browsers that do not support the Canvas tag, allowing for fallback content. For example if you take the following example:

Example 1: Fallback Content

<canvas id="stockGraph" width="150" height="150">
  <p>current stock price: $3.15 +0.15</p>

The text inside the HTML block will render in any browser not supporting Canvas (FireFox 1.0 or IE without CanvasExplorer). Generally, Safari simply drops the closing tag and ignores it, causing no problems, but if you desire to use fallback content, then you need to target Safari in your CSS to not show the fallback content:

Example 2: CSS Targeting Safari

canvas * {display: none;}
canvas * {display: block; #} /** Safari will ignore this */

This hack initially applies a style that displays all sub-elements of a Canvas Element as none, then it tells the browsers to display the sub-elements as block. However, by putting an extra # after the semicolon, we cause Safari to stop rendering the styles and simply drop all declarations inside that bracket. Other browsers just ignore the # and apply the block display style. Lastly, for the * selector to work, all fallback content must be contained inside of another HTML tag (I used the p tag in Example 1). Remember, this is a hack and wont validate, and/or may not always work. However it has continued to work since Nicholas Gagne&rsquot;s first blogged about it in 2004.

Basic Example

The Test Page contains 3 Canvas Elements, each with alternative fallback content: 1) does nothing, just shows that the alternative content works correctly, 2) draws two rectangles, the second of which overlays part of the first and demonstrates transparency, and 3) draws a heart shape using a more advanced transformation. These examples were found at Mozilla Developer Center: Canvas Tutorial, which provides a much more indepth explanation about the various Canvas rendering options. That article and the Wikipedia Canvas HTML Element Article provided the majority of todays content. I recommend reading both articles if you have additional interest in exploring Canvas.