HTML canvas putImageData() Method

Canvas Object

Example

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

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);
}
    

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 a specified ImageData object) back onto the canvas.

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

Tip: See the createImageData() method, which 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 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, of the position on the canvas where the image will be placed.
dirtyY	Optional. The vertical value (y), in pixels, of the position on the canvas where the image will be placed.
dirtyWidth	Optional. The width, in pixels, to use when drawing the image on the canvas.
dirtyHeight	Optional. The height, in pixels, to use when drawing the image on the canvas.

---

Canvas Object