Long: How to Transition an Image from B&W to Color with Canvas

Recently, in the CodeCanyon forums, a question was brought up: “How do I transition an image from black and white, to color — using only one image?” Unfortunately, at this point in time, it’s not possible with CSS. However, if we’re creative with JavaScript and canvas, we can create a solution relatively easily. I’ll show you how in today’s video tutorial!

Choose 720p for maximum clarity.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Final Source


 



   
   untitled

Conclusion

So what do you think? Would you use this technique in your own projects? Can you think of a better way that doesn’t involve using a server-side language or sprites? Let me know in the comments!