Canvas Pocket Reference

Name

ImageData — an array of pixel data for an image

Properties

data

A read-only reference to an array-like object that contains the image data

height

The number of rows of image data

width

The number of pixels per row of data

Description

An ImageData object holds the red, green, blue, and alpha 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 array-like object known as a CanvasPixelArray object. (CanvasPixelArray is documented here, and does not have its own entry in this reference section.) A CanvasPixelArray is an optimized array of bytes. The elements of this array must be 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 ...