HTML canvas putImageData() Method

Example

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function myFunction() {
  let imgData = ctx.getImageData(10, 10, 50, 50);
  ctx.putImageData(imgData, 10, 70);
}

Try this code ❯

Meaning

The putImageData() method puts the image data back onto the canvas.

Standard 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	Specifies the x-coordinate, in pixels, of the upper-left corner of the ImageData object.
y	Specifies the y-coordinate, in pixels, of the upper-left corner of the ImageData object.
dirtyX	Optional. Specifies the horizontal (x) value, in pixels, where to place the image on the canvas.
dirtyY	Optional. Specifies the vertical (y) value, in pixels, where to place the image on the canvas.
dirtyWidth	Optional. Specifies the width to use to draw the image on the canvas.
dirtyHeight	Optional. Specifies the height to use to draw the image on the canvas.