HTML canvas putImageData() Method

❮ HTML canvas Reference

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

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



Browser Support




Status







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.
❮ HTML canvas Reference