เปลี่ยนสีของภาพที่วาดบน HTML5 canvas element

เพื่อเปลี่ยนสีของภาพที่วาดบน HTML5 Canvas element ลองรันโค้ดด้านล่าง ใช้เมธอด drawImage():

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