Cool Down with Canvas and JavaScript

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.