The ImageData() constructor returns a newly instantiated ImageData object built from the typed array given and having the specified width and height.

This constructor is the preferred way of creating such an object in a Worker.

Syntax

new ImageData(array, width [, height]);
new ImageData(width, height);

Parameters

array Optional
A Uint8ClampedArray containing the underlying pixel representation of the image. If no such array is given, an image with a black rectangle of the specified width and height will be created.
width
An unsigned long representing the width of the image.
height
An unsigned long representing the height of the image. This value is optional if an array is given: the height will be inferred from the array's size and the given width.

Return value

A new ImageData object.

Errors thrown

IndexSizeError
Thrown if array is specified, but its length is not a multiple of (4 * width) or (4 * width * height).

Examples

Creating a blank ImageData object

This example creates an ImageData object that is 200 pixels wide and 100 pixels tall, containing a total of 20,000 pixels.

let imageData = new ImageData(200, 100);
// ImageData { width: 200, height: 100, data: Uint8ClampedArray[80000] }

Initializing ImageData with an array

This example instantiates an ImageData object with pixel colors defined by an array.

HTML

<canvas id="canvas"></canvas>

JavaScript

The array (arr) has a length of 40000: it consists of 10,000 pixels, each of which is defined by 4 values. The ImageData constructor specifies a width of 200 for the new object, so its height defaults to 10,000 divided by 200, which is 50.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const arr = new Uint8ClampedArray(40000);

// Iterate through every pixel
for (let i = 0; i < arr.length; i += 4) {
  arr[i + 0] = 0;    // R value
  arr[i + 1] = 190;  // G value
  arr[i + 2] = 0;    // B value
  arr[i + 3] = 255;  // A value
}

// Initialize a new ImageData object
let imageData = new ImageData(arr, 200);

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);

Result

Specification

Specification Status Comment
HTML Living Standard
The definition of 'ImageData()' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 42Edge Full support YesFirefox Full support 29IE No support NoOpera Full support 29Safari ? WebView Android No support NoChrome Android Full support 42Edge Mobile ? Firefox Android Full support 29Opera Android ? Safari iOS ? Samsung Internet Android Full support 4.0

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

Document Tags and Contributors

Contributors to this page: mfluehr, fscholz, jpmedley, zbjornson, DevelX, teoli
Last updated by: mfluehr,