Color change of image drawn on HTML5 canvas element

In order to change the color of the image drawn on the HTML5 Canvas element, you can try running the following code. Use drawImage() method -

function display(img1, red, gr, bl) { //func to change color of image    
var canvas1 = document.createElement('canvas');//canvas element initialisation

canvas1.width = img.width;//canvas width initialisation    
canvas1.height = img.height; //canvas height initialisation

var ctx1 = canvas1.getContext('2d');    
ctx1.drawImage(img, 0, 0);

var myImg =ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
for (var t=0;t< myImg.data.length;t+=4) {        
   myImg.data[t]= red | myImg.data[t];        
   myImg.data[t+1]= gr | myImg.data[t+1];        
   myImg.data[t+2]= bl | myImg.data[t+2];    
}
ctx1.putImageData(myImg,0,0); // Image data is adjusted according to context    
return c;
},

The above is the detailed content of Color change of image drawn on HTML5 canvas element. For more information, please follow other related articles on the PHP Chinese website!