Canvas createImageData() Method
Example
Create a 100*100 pixels ImageData object where every pixel is reds:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(100, 100);
for (let 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);
Try it Yourself »
Description
The createImageData() method creates a new blank ImageData object. The new
object's pixel values are transparent black: RGBA(0, 0, 0, 0).
For every pixel in an ImageData object there are four pieces of information, the RGBA values:
R - The 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)
The color/alpha information is held in an array 4 times the size of the ImageData object: width*height*4.
The array containing the color/alpha information is stored in the data property of the ImageData object.
Example
Setting the first pixel in an ImageData object red:
imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
Setting the second pixel in an 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;
See Also:
Syntax
There are two versions of the createImageData() method:
Create a new ImageData object with specified dimensions:
| context.createImageData(width, height) |
Create a new ImageData object with the same dimensions as another ImageData object (does not copy the ImageData object):
| context.createImageData(imageData) |
Parameter Values
| Param | Description |
|---|---|
| width | The width of the new ImageData object in pixels |
| height | The height of the new ImageData object in pixels |
| imageData | anotherImageData object |
Return Value
| An imageData object |
Browser Support
The <canvas> element is an HTML5 standard (2014).
createImageData() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference