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. |