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 inWeb Workers.

The readonlyImageData.data property returns aUint8ClampedArray orFloat16Array that contains theImageData object'spixel data. Data is stored as a one-dimensional array in the RGBA order.

Value

The type depends on theImageData.pixelFormat used:

AUint8ClampedArray if thepixelFormat is"rgba-unorm8".
AFloat16Array if thepixelFormat is"rgba-float16".

This example creates anImageData object that is 100 pixels wide and 100pixels tall, making 10,000 pixels in all. Thedata array stores four valuesfor 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

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

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 newImageData object with colorfulpixels.

HTML

html

<canvas></canvas>

JavaScript

Since each pixel consists of four values within thedata array, thefor loop iterates by multiples of four. The values associated with eachpixel 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);// Fill the array with RGBA valuesfor (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 canvasctx.putImageData(imageData, 20, 20);