HTML canvas putImageData() Method

Canvas Object : The code below copies the pixel data for a specified rectangle on the canvas with getImageData(), and then put the image data back onto the canvas with putImageData()

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
putImageData()	4.0	9.0	3.6	4.0	10.1

Definition and Usage

The putImageData() method puts the image data (from a specified ImageData object) back onto the canvas.

Tip: Read about the getImageData() method that copies the pixel data for a specified rectangle on a canvas.

Tip: Read about the createImageData() method that creates a new, blank ImageData object.

JavaScript Syntax

JavaScript syntax:	context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

Parameter Values

Parameter	Description
imgData	Specifies the ImageData object to put back onto the canvas
x	The x-coordinate, in pixels, of the upper-left corner of where to place the image on the canvas
y	The y-coordinate, in pixels, of the upper-left corner of where to place the image on the canvas
dirtyX	Optional. The x-coordinate, in pixels, of the upper-left corner of where to start drawing the image. Default 0
dirtyY	Optional. The y-coordinate, in pixels, of the upper-left corner of where to start drawing the image. Default 0
dirtyWidth	Optional. The width to use when drawing the image on the canvas. Default: the width of the extracted image
dirtyHeight	Optional. The height to use when drawing the image on the canvas. Default: the height of the extracted image

❮ Canvas Object

Contact US

Email: