Image manipulation

Make transparent

Here our goal is to create a transparent image.

We will iterate over the bitmap array pix and we will change the color of prototype.pngto transparent. After this, we will put the new image data into the canvas4

The JavaScript code for this is:

/* make transparent*/
for (var i = 0, n = pix.length; i < n; i ++) {
  imgData4.data[i ] = pix[i ];
  if (i % 4 == 3 ) {
    imgData4.data [i] = pix[i]/3
  }
}
console.log(imgData4);
context4.putImageData(imgData4, 0, 0);

The above will create the image:

Make transparent

Important Note: To do this exercise using your local file system, you will need to use Firefox as your browser. Chrome will display an error due to security constraints.