/

HTML / CSS / JavaScript Tutorial

JavaScript canvas2d object method: createImageData()

[this page | pdf | back links]

The createImageData() method of the JavaScript DOM object returned by the getContext("2d") method applied to the HTML <canvas> element creates a new blank ImageData object.

 

Each pixel in the ImageData has 4 values, i.e. its RGBA values (see CSS Colours). The data is held in an array which is 4 times the size of the ImageData object, i.e. width x height x 4. This is stored in the data property of the ImageDataObject.

 

There are two versions of the createImageData() method with the following formats and parameters:

 

context.createImageData(width, height)

 

Parameter

Required / Optional

Description

width

Required

Width of ImageData, in pixels

height

Required

Height of ImageData, in pixels

 

context.createImageData(imageData)

 

Parameter

Required / Optional

Description

imageData

Required

ImageData object to be used as a template for the new object (note only dimensions are used, the image data is not copied

 


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile