Web/API/ImageData/data

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 StandardThe definition of 'ImageData.data' in that specification.	Living Standard	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`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