# JS/Canvas Polar Clock

Summer is finally here, and I’ve been “getting my open source on” (did I really just say that?)—first with CSS3 Breadcrumbs, and now this.

Long ago, I read an article on Lifehacker that mentioned a free, unique, and artistic polar clock screen saver by pixelbreaker. I used it as my screen saver for a long time, but I had to stop using it since I spent too much time watching it as the time passed by; it was just so cool to stare at!

Fast-forward to a few days ago: I randomly started thinking about the HTML5 Canvas, and the idea came to me: what if I made an HTML5 polar clock? Fortunately, this had already been done by Henrik Joreteg. Favoring object-oriented, modular code, I used Henrik’s code to make a CoffeeScript class, compiled it into JavaScript, and used it in a web page:

Enough already! Let’s see the code!

You can grab the compiled JavaScript here.

Usage is very straightforward: You just need a <canvas> tag somewhere on your page:

… the included JavaScript library:

… and some configuration code:

Although not as readable as pixelbreaker’s screen saver, I think it looks cool… and what better thing is there to be done with something like this than to put it on the OS X Dashboard? (Did you know that dashboard widgets are just HTML, CSS, and JavaScript? I was surprised the first time I heard that, too). I opened up Dashcode, copied the polarClock.js file, tweaked the code a little, et voilà!

11 May 2012: After reading up about HTML5 localStorage and cache manifests, I have released an “offline” polar clock web app tailored to iOS devices (but still works remarkably well in web browsers and other devices). Add the app to your home screen (or bookmarks) for easier access. Tap on the clock to cycle among the 12-/24-hour and 1-/2-phase modes. The web app is “offline” in that it caches all of the necessary files to your device, so it can run even without an internet connection. Enjoy!