Grey to Colored Image

I want to improve the code, in which you can enter a grey bitmap and it will return you a colored one.

function ChangeBaseGrey(bitmap, color)
{
var canvas = document.getElementById("imagesColored");
var ctx = canvas.getContext("2d");
var dataBitmap = bitmap.data;

var r0 = (color >> 16) & 0xff,
g0 = (color >> 8) & 0xff,
b0 = color & 0xff;

for(var c = 0; c < dataBitmap.length; c += 4)
{
var r1 = dataBitmap[c],
g1 = dataBitmap[c + 1],
b1 = dataBitmap[c + 2];

if(dataBitmap[c + 3] > 0 && (r1 == g1 && r1 == b1 && g1 == b1))
{
var co = color;
dataBitmap[c] = colorRGBBound(r0 * (r1 / 255));
dataBitmap[c + 1] = colorRGBBound(g0 * (g1 / 255));
dataBitmap[c + 2] = colorRGBBound(b0 * (b1 / 255));
}
}

ctx.putImageData(bitmap, 0, 0);

var finalImage = new Image();
finalImage.src = canvas.toDataURL("image/png");

return finalImage; // Colored Image Output
}


• You never use var co = color;, throw it away
• (r1 == g1 && r1 == b1 && g1 == b1) consider that if r1 = g1 and r1 = b1, then g1 must be equal to b1 so you can use the simpler (r1 == g1 && r1 == b1)
• r0,g0,b0 and r1,g1,b1 are not the most intuitive variable names..
• Consider caching the values of colorRGBBound(r0 * (r1 / 255)); , there are only 255 possibilities for the value of r1 and you can use the same cache for r1,g1 and b1