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

HTMLWeb DevelopmentFront End Technology

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 −

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<;t+=4) {  [t]= red |[t];  [t+1]= gr |[t+1];  [t+2]= bl |[t+2];    
ctx1.putImageData(myImg,0,0); // Image data is adjusted according to context    
return c;
Updated on 04-Mar-2020 06:24:02