HTML canvas putImageData()Method
Canvas ObjectExamples
The following code uses getImageData() to copy the pixel data of the specified rectangle on the canvas, and then uses putImageData() to put the image data back onto the canvas:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
Try it Yourself »
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 puts image data (from the specified ImageData object) back onto the canvas.
Tip:See alsogetImageData()method, which can copy the pixel data of the specified rectangle on the canvas.
Tip:See alsocreateImageData()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 be put back onto 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 value (x), in pixels, at which to place the image on the canvas. |
| dirtyY | Optional. The vertical value (y), in pixels, at which 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. |
Other Extensions