The Canvas Tag

Posted on September 12, 2005

Finally got around to having a quick play with the <canvas> tag, which is now supported in the Firefox 1.5 Beta, as well as Safari (users of other browsers won't be able to see anything).

Coupled with the whole AJAX / javascript boom, this could really be the next big thing (one of the many) now that it's finally being implemented by Firefox. Think on-the-fly graphs in AJAX applications.

For those who haven't come across it, the <canvas> tag allows you to literally create a blank canvas that you can then "paint" onto using javascript, a lot like the drawing API in flash.

Inserting a canvas is as simple as this:

<!-- html: create a canvas tag -->
<canvas id="testCanvas" width='100' height='100' />

And it doesn't get much more complicated at the javascript end either:

// javascript: set up the canvas object for drawing
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
	
// draw a vertical line through the middle of the canvas
context.beginPath();
context.moveTo(50,0);
context.lineTo(50,100);
	
context.stroke();

Here's a quick example I knocked up using setInterval. Takes me back to those basic days.

For a class definition, check out the apple developer's connection documentation.

In OS X the canvas tag is part of the Web Kit, and can therefore be used in any application that has access to it, meaning it can be used to develop widgets such as the world time clock.