This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Initialized to a Uint8ClampedArray object. The Uint8ClampedArray object must use a Canvas Pixel ArrayBuffer for its storage, and must have a zero start offset and a length equal to the length of its storage, in bytes.

Property of apis/canvas/ImageDataapis/canvas/ImageData


Note: This property is read-only.

var result = ImageData.html/elements/data;

Return Value

Returns an object of type ObjectObject


This example creates an ImageData object, then sets all its data pixels to yellow (at half intensity), then puts the object onto the canvas at a specified position.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
var imgdata = ctxt.createImageData(150, 100);
for (var i = 0; i <; i += 4) {[i+0] = 255;[i+1] = 255;[i+2] = 0;[i+3] = 128;

ctxt.putImageData(imgdata, 10, 10);


An image is organized by pixels with four values per pixel: red, green, blue, and alpha. To access a specific pixel, use the formula ((canvas.width * y)+ x) *4, where x and y are the row and offset in the image.

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation