JavaScript: The Definitive Guide, 6th Edition

Name

ImageData — an array of pixel data from a <canvas>

Synopsis

An ImageData object holds the red, green, blue, and alpha (transparency) components of a rectangular region of pixels. Obtain an ImageData object with the createImageData() or getImageData() methods of the CanvasRenderingContext2D object of a <canvas> tag.

The width and height properties specify the dimensions of the rectangle of pixels. The data property is an array that holds the pixel data. Pixels appear in the data[] array in left-to-right and top-to-bottom order. Each pixel consists of four byte values that represent the R, G, B, and A components, in that order. Thus, the color components for a pixel at (x,y) within an ImageData object image can be accessed like this:

var offset = (x + y*image.width) * 4;
var red = image.data[offset];
var green = image.data[offset+1];
var blue = image.data[offset+2];
var alpha = image.data[offset+3];

The data[] array is not a true JavaScript array, but an optimized array-like object whose elements are integers between 0 and 255. The elements are read/write, but the length of the array is fixed. For any ImageData object i, i.data.length will always equal i.width * i.height * 4.

Properties

readonly byte[] data

A read-only reference to a read/write array-like object whose elements are bytes.

readonly unsigned long height

The number of rows of image data.

readonly unsigned long width

The number of pixels per row of data.