Canvas putImageData() method

Canvas-Referenzhandbuch

Definition and usage

putImageData() Method to place 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 value

Parameter Description
imgData 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, representing the position of the image on the canvas.
dirtyY Optional. The horizontal value (y), in pixels, representing the position of the image on the canvas.
dirtyWidth Optional. The width used to draw images on the canvas.
dirtyHeight Optional. The height used to draw images on the canvas.

Browser support

Die in der Tabelle genannten Zahlen geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

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

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Canvas-Referenzhandbuch