/

HTML / CSS / JavaScript Tutorial

JavaScript canvas2d object method: getImageData()

[this page | pdf | back links]

The getImageData() method of the JavaScript DOM object returned by the getContext("2d") method applied to the HTML <canvas> element returns an ImageData object characterised by the pixel data for a specific rectangle in the canvas.

 

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.

 

It has the following syntax with the following parameters.

 

context.getImageData(x, y, width, height)

 

Parameter

Required / Optional

Description

x

Required

x-coordinate of upper-left corner

y

Required

y-coordinate of upper-left corner

width

Required

Width of rectangle, in pixels

height

Required

Height of rectangle, in pixels

 


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


Desktop view | Switch to Mobile