You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
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 givenUint8ClampedArray
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 ascreateImageData()
is not available there.
Properties
ImageData.data
Read only- Is a
Uint8ClampedArray
representing a one-dimensional array containing the data in the RGBA order, with integer values between0
and255
(inclusive). ImageData.height
Read only- Is an
unsigned long
representing the actual height, in pixels, of theImageData
. ImageData.width
Read only- Is an
unsigned long
representing the actual width, in pixels, of theImageData
.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'ImageData' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ImageData | Chrome Full support 4 | Edge Full support Yes | Firefox Full support 14 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 14 | Opera Android Full support 10.1 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
ImageData() constructor | Chrome Full support 42 | Edge Full support Yes | Firefox Full support 29 | IE No support No | Opera Full support 29 | Safari ? | WebView Android No support No | Chrome Android Full support 42 | Firefox Android Full support 29 | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 4.0 |
data | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 14 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 14 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
height | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 14 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 14 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
width | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 14 | IE Full support 9 | Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 14 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Available in workers | Chrome Full support Yes | Edge ? | Firefox Full support 25 | IE ? | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 25 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
See also
CanvasRenderingContext2D
- The
<canvas>
element and its associated interface,HTMLCanvasElement
.