Images on the Canvas - HTML5 Canvas - page 277

Getting image data
To retrieve a set of pixel data from the canvas and put it into an ImageData instance, we use
the getImageData() function call:
imagedata = context . getImageData ( sx , sy , sw , sh )
sx , sy , sw , and sh define the location and size of the source rectangle to copy from the canvas
to the ImageData instance.
NOTE
A security error might be thrown if the origin domain of an image file is not the same as the origin
domain of the web page. This affects local files (when running on your hard drive rather than on a
web server running locally or on a remote server), because most browsers will treat local image files
as though they are from a different domain than the web page. When running on a web server, this
errorwillnotbethrownwithlocalfiles.ThecurrentversionsofSafari(6.02),IE(10),andFirefoxdo
not throw this error for local files.
Putting image data
To copy the pixels from an ImageData instance to the canvas, we use the putImageData()
function call. There are two different constructors for this call:
context . putImageData ( imagedata , dx , dy )
context . putImageData ( imagedata , dx , dy [, dirtyX , dirtyY ,
dirtyWidth , dirtyHeight ])
The first constructor simply paints the entire ImageData instance to the destinationX ( dx )
and destinationY ( dy ) locations. The second constructor does the same but allows the pas-
sage of a “dirty rectangle,” which represents the area of the ImageData to paint to the canvas.