Image color overlay in HTML5 / JS

Question

I have some png vectors with transparent backgrounds that I want to color overlay on the fly, so users can choose a vector and then choose which color they want it from a picker.

Only stipulation is that they cant be masked with background colors, because multiple pngs will be loaded onto the same canvas and will need to overlap.

How exactly do I go about loading an image into a canvas and then overlaying it with a certain color?

Edit: I have found some info here and here ( - answer by Nathan ) which sort of work, but not in all browsers.

The second one especially as I need only the png itself to be overlayed, and the transparencey to stay transparent

Answer 1

Practically you want to load the image into canvas and overlay it with a certain color, that will give a color effect to the overall image.

This jQuery plugin does exactly that, it loads the image into canvas, manipulates the color giving the nice tinting effect and convert it back to image element. Converting this back into image element is a very important part, as some user may style their CSS base on img element, instead of ID or class.

Just play with the interactive demo :

and go through the docs :

Have fun.