Dynamic sprite coloring

Thanks to many people releasing free culture licensed artwork, LPC characters can have all kinds of crazy hair cuts. I'm currently working on character customization and would like to include all these hair styles in my game - and in various colors! Unfortunately in order to allow that I would need to include more than one hundred sprite sheets and increase download size by few megabytes just for the haircut sprite sheets. Or do I? If you have a look at this master sprite sheet you can notice that all the hair colors use exactly the same base image and a simple, solid color mask. The color on the image is multiplied by the image on the mask producing the desired hair color. Implementing this logic in the game would reduce the required download size and could potentially be re-used for item tinting (like in Diablo 2 for 'magic' items)

My first approach was rather naive: take every pixel in the canvas, multiply it by the desired mask value and store the resulting image. Unfortunately this technique is dead-slow, especially in Firefox, processing one sprite sheet could take up to 10 seconds on a powerful machine. Even after few optimizations, getImageData just takes too much time.

As an alternative I've started looking at using WebGL. Surprisingly I couldn't find any off-the-shelf, 3rd party library/engine to apply simple shaders (pixel multiplication in my case) to an existing image/canvas so I had to learn basics of WebGL (thanks Gregg fro your amazing tutorial!). Once I grasped the basics I was able to develop a simple demo that uses no 3rd party code and does exactly what I need (source code is available on Github). I've used this technique in the game to render hair sprite sheets colored based on user choice and it works like a charm. For the time being my naive pixel-by-pixel approach is still used in the game as a fallback for browsers without WebGL.