ex6-01-about.txt, cr 01 may 2015 by rha on tin can

Example 6-06, Pixel manipulation on the canvas

The support file (*.html and *.css) same as ex6-01.
An image on the canvas, even if it has been loaded as a JPEG file,
is a bitmap. 
In this case, the JPEG file of size 346 x 426 as been loaded onto a canvas
of size 600 by 600 pixels, with the canvas method:
	ctx.drawImage(photo, 100, 100);
Thus, painted onto the canvas, it is a bitmap of
	346 x 426 = 147,396 pixels.
Each point has a color described by four bytes, one each for R, G, B, and A.
This requires an array of 589,584 bytes, or about half a MB.

We may access this array in JS with the method:
	ctx.getImageData(x, y, w, h);
with, in this case, coords (100, 100, 346, 426).
Then we may manipulate the data as we please with JS, and then clear
the canvas, and paint the revised array back to the canvas as a new image,
of the same size and location, with the method:
	ctx.putImageData(array, x, y);

Here I am following Fulton and Fulton, p. 170.

end