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.

Get JavaScript: The Definitive Guide, 6th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.