Canvas - Introducing HTML5 - page 161

In the previous code listing, I wait until the image has loaded
before trying to copy it to the canvas. I draw it into the canvas
and immediately read out the pixel data to invert the image.
In the for loop, I'm using i += 4 , which ensures I'm iterating
over each pixel and not the pixel channels. By setting the pixel
bit to 255 minus the current value, I get an inverted colour.
Finally, I put the modified pixels back into the canvas using
putImageData , passing in the CanvasPixelArray object and the
x/y start point.
FIguRE 5.17 If you were to
X-ray Bruce and Remy, you'd
see they look just as strange.
NoTE For security, the canvas element contains an internal origin-clean
flag that's set to true by default. This flag will flip to false if an image or
video is used whose origin does not match that of the document that owns the
canvas. The same goes for using a canvas as an image source if it already has
the origin-clean flag set to false. If the flag is false, you won't be able to use the
getImageData or toDataURL methods. This remains the case even if you
change the size of your canvas or draw on the canvas after the flag is set to false.