javascript - qué - figuras en canvas html5

Cambiar el color de una imagen dibujada en un elemento canvas de HTML5

Question

Tengo esta imagen aquí:

¿Cómo puedo cambiar su color completo a un valor de rgb definido por el usuario?

En otras palabras, dada una imagen en escala de grises, ¿cómo puedo volver a cambiar a color, con el color que es cualquier valor rgb.

Answer 1

Gracias al comentario de @Rikonator la solución es la siguiente:

function changeColor(img, r, g, b) {
var c = document.createElement(''canvas'');
c.width = img.width;
c.height = img.height;
var ctx = c.getContext(''2d'');
ctx.drawImage(img, 0, 0);
var imgData=ctx.getImageData(0, 0, c.width, c.height);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]= r | imgData.data[i];
imgData.data[i+1]= g | imgData.data[i+1];
imgData.data[i+2]= b | imgData.data[i+2];
}
ctx.putImageData(imgData,0,0);
return c;
},