HTML canvas putImageData() Method
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 to draw the image on the canvas. | 
| dirtyHeight | Optional. The height to use to draw the image on the canvas. |