Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change color Image in Canvas

Tags:

I want to change color a Image in canvas

this is the Image

enter image description here

You can see there is a Image transparent I was try using PutImgData but my transparent is changing color Is there anyway to change color the car and money only ? I was using this code :

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");
canvas.height = canvas.width = 100;
ctx.fillStyle = 'red';
ctx.fillRect(10,10,20,10);
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 45, 45),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    if(pix[i+3]==0)
  {continue;}
    pix.length[i]=r|pix.length[i];
  pix.length[i+1]=g|pix.length[i+1];
  pix.length[i+2]=b|pix.length[i+2];
   pix[i + 3] = 255;
}

ctx.putImageData(imgd, 0, 0);