data

Summary

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

Syntax

Note: This property is read-only.

var result = ImageData.html/elements/data;

Return Value

Returns an object of type ObjectObject

Examples

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>
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
var imgdata = ctxt.createImageData(150, 100);
for (var i = 0; i < imgdata.data.length; i += 4) {

   imgdata.data[i+0] = 255;
   imgdata.data[i+1] = 255;
   imgdata.data[i+2] = 0;
   imgdata.data[i+3] = 128;

}
ctxt.putImageData(imgdata, 10, 10);
</script>

Notes

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

Attributions

• Microsoft Developer Network: Windows Internet Explorer API reference Article