Easy Tutorial
❮ Av Event Play Att Hr Align ❯

HTML canvas putImageData() Method

HTML canvas Reference Manual

Example

The following code copies the pixel data of a specified rectangle on the canvas using getImageData(), and then places the image data back onto the canvas using putImageData():


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the putImageData() method.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

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

Tip: See the getImageData() method, which can copy the pixel data of a specified rectangle on the canvas.

Tip: See the createImageData() method, which can create 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 on the canvas.
x The x coordinate, in pixels, of the upper-left corner of the ImageData object.
y The y coordinate, in pixels, of the upper-left corner of the ImageData object.
dirtyX Optional. The horizontal (x) value, in pixels, where to place the image on the canvas.
dirtyY Optional. The vertical (y) value, in pixels, where to place the image on the canvas.
dirtyWidth Optional. The width to use when drawing the image on the canvas.
dirtyHeight Optional. The height to use when drawing the image on the canvas.

❮ Av Event Play Att Hr Align ❯