Whats the Time Mister Wolf?

Those of us who have made our own web pages have probably had the same thought at one time or another: "You know, I don't want to muck around with Java applets or Flash but this page would be so much better with a big wooden clock in the top right corner!"

Well, now thanks to the modern wonder that is the canvas tag, support for big wooden clocks is built right into your browser*.

Wow Andrew, how does it work?

Its actually pretty simple. The canvas tag sets up a rectangular image within the body of your document. It starts off transparent but you can use Javascript to draw onto it using the standard primitives (except for text, because that was just Too Hard). This is not the same as SVG, which has the drawing primitives as part of the document object model, rather the canvas tag works pretty much like a standard image that you can draw on via scripting.

The Javascript code is straight forward, mainly because I am not very good at it. Every second it draws the background clock face (stored in a separate PNG file), then draws the hands (which are just coloured lines) on top. The angles are worked out using a little high-school maths. If you read the source you will notice that I scale the canvas so that the coordinate system runs from (0, 0) to (1, 1). This makes drawing the clock easy becuase the middle of the clock is always at (0.5, 0.5) no matter what the dimensions of the canvas are.

Of course, it is technically possible to use the canvas tag for more than just clocks. In todays world of AJAX and abundant web services, it may be possible to create barometers, weather vanes, and even those little gnomes that change colour when it gets humid. The sky is literately the limit.

Back to my homepage.

* sensible browsers anyway. Which is to say Firefox, Safari, and maybe Opera. Internet Explorer users need not apply.