Cool Down with Canvas and JavaScript

Thursday, March 22, 2012

The idea is to use an image as a "command button". When the user clicks on the image, the image greys out and acts disabled for a period of time. The image slowly transitions back to an enabled state by letting color sweep around itself in a clock-like manner. 

There are hundreds of approaches you could use to implement the effect. My initial attempt used a single image and pixel manipulation in a canvas.  I need to give credit to David Catuhe (blog, @deltakosh) for giving me the idea of using two images and a canvas. One image has color, and one image is in black and white. Selectively drawing the images into a canvas element can achieve the smooth "World of Warcraft cool down" effect, and the code is simple. David, by the way, is one of the many people I met last year who work for Microsoft France and who were all wonderfully friendly and smart. Fond memories!

Try it out on jsFiddle.

Cool down with Canvas and JavaScript


Comments
gravatar Rik Hemsley Friday, March 23, 2012
Tried on jsFiddle. Flickers but does nothing else. Current stable Chrome.
gravatar Rik Hemsley Friday, March 23, 2012
I lied, it works. Should have noticed the bit about clicking on it, rather than just running the script.

Fabio Friday, March 23, 2012
World of Warcraft cooldowns start at 12'o position. :P

Great work, very simple and easy to understand code.
gravatar scott Friday, March 23, 2012
@Fabio: Ah, well, you can tell I don't really play :)
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!