Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas createImageData() Method

❮ Canvas Reference

Example

Create a 100*100 pixels ImageData object where every pixel is reds:

YourbrowserdoesnotsupporttheHTML5canvastag.

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;


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