Html5 Canvas overlay

Question

Is there a good solution to draw a bitmap with an overlay color with canvas ?

What I\'m looking to do is drawing a bitmap with a unique color for all not transparent

Answer 1

Live Demo

One way to do it is to loop through each pixel and change the r/g/b values to the value you want it. By skipping over the alpha value it will only change the opaque pixels to the color you want.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i