HTML canvas ImageData data Property

Introduction

Create a 100*100 pixels ImageData object where every pixel is set to the color red:

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);

var i;/*from  w w w .  ja v  a 2 s.com*/
for (i = 0; i < imgData.data.length; i += 4) {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
}

ctx.putImageData(imgData, 10, 10);
</script>

</body>
</html>

The data property returns an object that contains image data of the specified ImageData object.

For every pixel in an ImageData object there are four pieces of information, the RGBA values:

Item Value
RThe color red (from 0-255)
GThe color green (from 0-255)
B The color blue (from 0-255)
A The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

The color/alpha information is held in an array, and is stored in the data property of the ImageData object. 

imageData.data;



PreviousNext

Related