HTML canvas putImageData() method

HTML5 Canvas Reference Manual

Definition and Usage

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

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

Tip:See also createImageData() method that can create a new blank ImageData object.

Example

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}

try it yourself

syntax

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

parameter values

parameters description
imgData Specify the ImageData object to be placed back on the canvas.
x The x coordinate of the top-left corner of the ImageData object, in pixels.
y The y coordinate of the top-left corner of the ImageData object, in pixels.
dirtyX Optional. The horizontal value (x), in pixels, indicating the position of the image on the canvas.
dirtyY Optional. The horizontal value (y), in pixels, indicating the position of the image on the canvas.
dirtyWidth Optional. The width used to draw an image on the canvas.
dirtyHeight Optional. The height used to draw an image on the canvas.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

HTML5 Canvas Reference Manual