Change Colour of an Image on HTML5 Canvas

In order to change colour of image drawn on an HTML5 Canvas element, you can try to run the following code. Use the drawImage() method −

Example: Code to change color of image

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;
},