HTML canvas getImageData() 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 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);



Browser Support




Status







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