HTML Reference Manual

HTML tag list

HTML canvas createImageData() method

createImageData() is a Canvas 2D API creates a new, empty, ImageData object of specified size. All pixels in the new object are transparent.

HTML canvas reference manual

Online Example

Create a100 * 10Create an ImageData object of 0 pixels, each pixel is red, and then place it on the canvas:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas createImageData() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　imgData=ctx.createImageData(100,100);
for　(var　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>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support createImageData() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

The createImageData() method creates a new blank ImageData object. The default pixel value of the new object is transparent black.

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

R - Red (0-255）
G - Green (0-255）
B - Blue (0-255）
A - alpha channel (0-255; 0 is transparent,255 is completely visible)

Therefore, transparent black represents (0,0,0,0).

color/The alpha information exists in array form, and since the array contains four pieces of information for each pixel, the size of the array is four times the size of the ImageData object: width*height*4。（There is a simpler way to get the array size, which is to use ImageDataObject.data.length）

including color/The alpha information array is stored in the ImageData object's data property.

Tip:in the color properties of the array./After the alpha information, you can use putImageData() The method copies image data back onto the canvas.

Example:

The syntax to change the first pixel of an ImageData object to red:

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

Syntax to change the second pixel in the ImageData object to green:

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

JavaScript syntax

There are two versions of the createImageData() method:

1. Creates a new ImageData object with the specified size (in pixels):

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

2. Creates a new ImageData object with the same size as the specified another ImageData object (without copying image data):

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

Parameter value

Parameter	Description
width	The width of the ImageData object, in pixels.
height	The height of the ImageData object, in pixels.
imageData	Another ImageData object.

　HTML canvas reference manual

HTML: <template> tag