Images on the Canvas - HTML5 Canvas - page 159

ImageData.data
This returns a single dimensional array of pixels representing the image data. Image
data is stored with 32-bit color information for each pixel, meaning that every
fourth number in this data array starts a new pixel. The four elements in the array
represent the red, green, blue, and alpha transparency values of a single pixel.
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.
A security error will 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 run-
ning locally or on a remote server), as 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 error will not be thrown with
local files. The current version of Safari (5.02) does not throw this error
for local files.
Putting image data
To copy the pixels from an ImageData instance to the canvas, we use the putImage
Data() 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 passage of a “dirty rectangle,” which represents the area of the ImageData to paint
to the canvas.
Application Tile Stamper
We are going to create a simple application that will allow the user to highlight a box
around some pixels on an image, copy them, and then use them as a stamp to paint
back to the canvas. It will not be a full-blown editing application by any means—it's
just a demonstration of one use of the ImageData object.