Change colour of an image drawn on an HTML5 canvas element.

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