ImageData: data property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Note: This feature is available in Web Workers.

The readonly ImageData.data property returns a Uint8ClampedArray or Float16Array that contains the ImageData object's pixel data. Data is stored as a one-dimensional array in the RGBA order.

Value

The type depends on the ImageData.pixelFormat used:

A Uint8ClampedArray if the pixelFormat is "rgba-unorm8".
A Float16Array if the pixelFormat is "rgba-float16".

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.

js
let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000

If the ImageData object is set up for floating-point pixels — for example, for high dynamic range (HDR) images —data will be a Float16Array instead.

js
let floatArray = new Float16Array(4 * 200 * 200);
let imageData = new ImageData(floatArray, 200, 200, {
  pixelFormat: "rgba-float16",
});
console.log(imageData.data); // Float16Array

Filling a blank ImageData object

This example creates and fills a new ImageData object with colorful pixels.

HTML

html

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.

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// Fill the array with RGBA values
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);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Aug 19, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content

Canvas API
ImageData
Constructor
1. ImageData()
Instance properties
Related pages for Canvas API
Guides
1. Manipulating video using canvas
Tutorial

ImageData: data property

In this article

Value

Examples

Getting an ImageData object's pixel data

Filling a blank ImageData object

HTML

JavaScript

Result

More examples

Specifications

Browser compatibility

See also

Help improve MDN