This article is in need of a technical review.
This article is in need of an editorial review.
You can directly manipulate pixel data in canvases at the byte level using the
ImageDataobject, which has three fields:
- The width of the image in pixels; this is a read only unsigned long.
- The height of the image in pixels; this is a read only unsigned long.
CanvasPixelArrayobject containing the image data.
CanvasPixelArrayobject can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "RGBA" format). Each color component is represented by an integer between 0 and 255. Each component is assigned a consecutive index within the array, with the top left pixel's red component being at index 0 within the array. Pixels then proceed from left to right, then downward, throughout the array.
widthx 4 bytes of data, with index values ranging from 0 to (
For example, to read the blue component's value from the pixel at column 200, row 50 in the image, you would do the following:
blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];
You may access the size of the pixel array in bytes by reading the
var numBytes = imageData.data.length;
Creating an ImageData object
To create a new, blank
ImageDataobject, you should use the
createImageData()method. This creates an
ImageDataobject optimized for best performance with the other
ImageDatamanipulation methods. There are two versions of the
var myImageData = context.createImageData(cssWidth, cssHeight);
This creates a new
ImageDataobject with the specified dimensions as specified in CSS pixels. Note that these dimensions may be different from the number of actual device pixels in the resulting object, so you should check the dimensions of the resulting object. All pixels are preset to transparent black.
Starting in Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), you can create a new
ImageDataobject with the same dimensions as the object specified by
anotherImageData. The new object's pixels are all preset to transparent black. This does not copy the image data!
var myImageData = context.createImageData(anotherImageData);
createImageData()method is not available in Gecko 1.9 based applications (including Firefox 3); for these applications, you will need to manually construct the
ImageDataobject. However, performance may degrade if you do this, so when possible, you should use
Getting the pixel data for a context
To obtain an
ImageDataobject containing a copy of the pixel data for a context, you can use the
var myImageData = context.getImageData(left, top, width, height);
This method returns an
ImageDataobject representing the pixel data for the area of the canvas whose corners are represented by the points (
height), and (
height). The coordinates are specified in canvas coordinate space units.
This method is demonstrated in the article Manipulating video using canvas.
Painting pixel data into a context
You can use the
putImageData()method to paint pixel data into a context:
context.putImageData(myImageData, dx, dy);
dyparameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
For example, to paint the entire image represented by
myImageDatato the top left corner of the context, you can simply do the following:
context.putImageData(myImageData, 0, 0);