ImageData

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

Note: This feature is available in Web Workers.

The ImageData interface represents the underlying pixel data of an area of a <canvas> element.

It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData().

Constructors

ImageData(): Creates an ImageData object from a given Uint8ClampedArray or Float16Array and the size of the image it contains. If no array is given, it creates an image of a transparent black rectangle. Note that this is the most common way to create such an object in workers as createImageData() is not available there.

ImageData.data Read only: A Uint8ClampedArray or Float16Array representing a one-dimensional array containing the data in the RGBA order. The order goes by rows from the top-left pixel to the bottom-right.
ImageData.colorSpace Read only: A string indicating the color space of the image data.
ImageData.height Read only: An unsigned long representing the actual height, in pixels, of the ImageData.
ImageData.width Read only: An unsigned long representing the actual width, in pixels, of the ImageData.
ImageData.pixelFormat Read only Experimental: A string indicating the format to use for the ImageData.