The readonly ImageData.data
property returns a Uint8ClampedArray
that contains the ImageData
object's pixel data. Data is stored as a one-dimensional array in the RGBA order, with integer values between 0
and 255
(inclusive).
Syntax
imageData.data
Examples
Getting an ImageData object's pixel data
This example creates an ImageData
object that is 100 pixels wide and 100 pixels tall, making 10,000 pixels in all. The data
array stores four values for each pixel, making 4 x 10,000, or 40,000 values in all.
let imageData = new ImageData(100, 100); console.log(imageData.data); // Uint8ClampedArray[40000] console.log(imageData.data.length); // 40000
Filling a blank ImageData object
This example creates and fills a new ImageData
object with colorful pixels.
HTML
<canvas id="canvas"></canvas>
JavaScript
Since each pixel consists of four values within the data
array, the for
loop iterates by multiples of four. The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const imageData = ctx.createImageData(100, 100); // Iterate through every pixel for (let i = 0; i < imageData.data.length; i += 4) { // Percentage in the x direction, times 255 let x = (i % 400) / 400 * 255; // Percentage in the y direction, times 255 let y = Math.ceil(i / 400) / 100 * 255; // Modify pixel data imageData.data[i + 0] = x; // R value imageData.data[i + 1] = y; // G value imageData.data[i + 2] = 255 - x; // B value imageData.data[i + 3] = 255; // A value } // Draw image data to the canvas ctx.putImageData(imageData, 20, 20);
Result
More examples
For more examples using ImageData.data
, see Pixel manipulation with canvas, CanvasRenderingContext2D.createImageData()
, and CanvasRenderingContext2D.putImageData()
.
Specification
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'ImageData.data' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
Legend
- Full support
- Full support