Hi, I’m Henrik Joreteg

Mobile web consultant, developer, and speaker

all posts | twitter | email | hire | book | tutorials

Building a Polar Clock imitation using the canvas tag and javascript


I’ve recently started playing around with some of the stuff that is available in HTML 5. It’s pretty sweet, I can’t wait until more web developers start building stuff with these new technologies. We desperately need a killer app like facebook to start using HTML 5 elements and asking users to upgrade. That would either force IE to join the ranks of modern browsers and actually start supporting some of this stuff or make people upgrade to a modern browser like Chrome, FireFox, Safari, or Opera.

Enough of the rant… on to the demo:

To see this you need a modern browser that supports the <canvas> tag such as Chrome, FireFox, Safari or Opera

The <canvas> tag is just a blank slate that you can draw on with Javascript. Currently it only has a 2D context, but Google is promoting and open source 3D context called O3D that I hope will become the standard for 3D rendering in browsers. It would open the browser up to building full 3D games and other complex 3D rendering. It’s currently available as a plugin, but the idea is to integrate it into all modern browsers as an open standard. If you haven’t heard about it, or want to learn more you can check out some O3D samples on Google Code.

This is my first real attempt at animations using canvas. For now, I’m just using the 2D context. This is a simplified javascript imitation of my favorite screen saver: Polar Clock by Pixel Breaker (free to download BTW). It’s an alternative clock. The outside ring represents seconds, then minutes, hours, day of the week, day of the month, and then month. So far, it’s pretty basic and not particularly useful or readable, but I did it more as an exercise.

If you view source on this page you can see my heavily commented code to see what’s going on. But if you really want to learn more Mozilla has a great canvas tutorial you might also wanna check out this <canvas> cheat sheet by Jacob Seidelin. If you’re a web developer… start using this stuff! It’s fun, it doesn’t require plugins and I’m sure you could build something waaaay cooler than this little demo. If you have any thoughts or suggestions, I’m all ears.