{{APIRef("Canvas API")}}
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()")}} {{experimental_inline}}
- Creates an
ImageData
object from a given {{jsxref("Uint8ClampedArray")}} and the size of the image it contains. If no array is given, it creates an image of a 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.
Properties
- {{domxref("ImageData.data")}} {{readonlyInline}}
- Is a {{jsxref("Uint8ClampedArray")}} representing a one-dimensional array containing the data in the RGBA order, with integer values between
0
and255
(included). - {{domxref("ImageData.height")}} {{readonlyInline}}
- Is an
unsigned
long
representing the actual height, in pixels, of theImageData
. - {{domxref("ImageData.width")}} {{readonlyInline}}
- Is an
unsigned
long
representing the actual width, in pixels, of theImageData
.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 4.0 | {{CompatGeckoDesktop("14")}} | 9.0 | 9.0 | 3.1 |
Support in workers | {{CompatUnknown}} | {{CompatGeckoDesktop("25")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
ImageData() constructor |
{{CompatChrome("43")}} | {{CompatGeckoDesktop("29")}} | {{CompatNo}} | {{CompatOpera("30")}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | {{CompatGeckoMobile("14")}} | {{CompatUnknown}} | 10.0 | 3.2 |
Support in workers | {{CompatUnknown}} | {{CompatGeckoMobile("25")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
ImageData() constructor |
{{CompatUnknown}} | {{CompatGeckoMobile("29")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
See also
- {{domxref("CanvasRenderingContext2D")}}
- The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.