HTML canvas createImageData() Method

Introduction

Create a 100*100 pixels ImageData object where every pixel is red, and put it onto the canvas:

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;//  w  w w. j ava  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 createImageData() method creates a new, blank ImageData object.

The new object's pixel values are transparent black by default.

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

Item Value
RThe color red (from 0-255)
G The 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)

Transparent black indicates: (0, 0, 0, 0).

The color/alpha information is held in an array.

The array contains 4 pieces of information for every pixel, the array's size is 4 times the size of the ImageData object: widthheight4.

You can find the size of the array by using ImageDataObject.data.length.

The color is stored in the data property of the ImageData object.

You can copy the image data back onto the canvas with the putImageData() method.

There are two versions of the createImageData() method:

The following creates a new ImageData object with the specified dimensions in pixels: 

var imgData = context.createImageData(width, height);

The second one creates a new ImageData object with the same dimensions as the object specified by anotherImageData and this does not copy the image data: 

var imgData = context.createImageData(imageData);

Parameter Values

Parameter Description
width The width of the new ImageData object, in pixels
heightThe height of the new ImageData object, in pixels
imageData another ImageData object



PreviousNext

Related