HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 canvas createImageData Method

HTML5 track Tag Reference HTML5 canvas reference

Example

Create a 50*50 pixels imagedata object where every pixel is red:

Canvas

JavaScript:

var ctx=c.getContext("2d");
var imgData=ctx.createImageData(50,50);
for (i=0; i<imgData.width*imgData.height*4;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);

Try it yourself »

Definition and Usage

The createImageData method specifies a new blank imagedata object.

All pixels of the new object has the default value transparent black, rgba(0,0,0,0).

The createImageData method can take two parameters which specifies the width and heigh.

The createImageData method can also take only one parameter, imgData, which will also create a new blank imagedata object where all the pixels are transparent black, but the width and height will be the same as the passed imageData object's width and height.

For every pixel in the imagedata object there are 4 pieces of information, the rgba values:
1. The color red (0-255)
2. The color green (0-255)
3. The color blue (0-255)
4. The alpha strength (0-255) where 0 is transparent and 255 is fully visible

The information is held in an array, and since the array contains 4 pieces of information of every pixel, the array's size is 4 times the size of the rectangle: width*height*4.

The array containing the information is stored in the .data property of the imagedata object.

You can change the information in the array, and put the new drawings back on the canvas, using the putImageData method.

JavaScript Syntax

Create imagedata object by specifying the width and height:

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

Create imagedata object by passing a imagedata object as a parameter:

JavaScript syntax:	var imgData=context.createImageData(imageData);

The syntax for making the first pixel in the imagedata object red:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

The syntax for making the second pixel in the imagedata object green:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Browser Support

The createImageData method is supported in all major browsers.

Parameter Values

When specifying the width and height:

Parameter	Values	Description
width	width	The width of the rectangle-area you will create
height	height	The height of the rectangle-area you will create

When passing an imagedata object:

Parameter	Values	Description
imageData	imageDdata	Specifies an imageData object which is used to specify the width and height