HTML canvas getImageData() 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 getImageData() method returns an ImageData object that copies the pixel data for the specified rectangle on a canvas.

Standard Syntax

JavaScript syntax:

context.getImageData(x,y,width,height);

Parameter Values

Parameter	Description
x	Specifies the x coordinate (in pixels) of the upper-left corner to start copy from.
y	Specifies the y coordinate (in pixels) of the upper-left corner to start copy from.
width	Specifies the width of the rectangular area you will copy.
height	Specifies the height of the rectangular area you will copy.