ImageData

{{APIRef("Canvas API")}}{{AvailableInWorkers}}

The ImageData interface represents the underlying pixel data of an area of a {{HTMLElement("canvas")}} element.

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

Constructors

• {{domxref("ImageData.ImageData", "ImageData()")}}
  • : Creates an ImageData object from a given {{jsxref("Uint8ClampedArray")}} or {{jsxref("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 {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} is not available there.

Instance properties

• {{domxref("ImageData.data")}} {{ReadOnlyInline}}
  • : A {{jsxref("Uint8ClampedArray")}} or {{jsxref("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.
• {{domxref("ImageData.colorSpace")}} {{ReadOnlyInline}}
  • : A string indicating the color space of the image data.
• {{domxref("ImageData.height")}} {{ReadOnlyInline}}
  • : An unsigned long representing the actual height, in pixels, of the ImageData.
• {{domxref("ImageData.width")}} {{ReadOnlyInline}}
  • : An unsigned long representing the actual width, in pixels, of the ImageData.
• {{domxref("ImageData.pixelFormat")}} {{ReadOnlyInline}} {{experimental_inline}}
  • : A string indicating the format to use for the ImageData.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{domxref("CanvasRenderingContext2D")}}
• The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.