HTML Canvas - getImageData() Method

The HTML Canvas getImageData() method of Canvas 2D API gets the data and returns ImageData object on the given portion of the Canvas element.

This method is not affected by any transform methods and returns the ImageData object only if the pixels are inside of the Canvas.

Syntax

Following is the syntax of HTML Canvas getImageData() method −

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

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Methods
1	x The x co-ordinate of the top-left corner of the rectangle from which ImageData is to be extracted.
2	y The y co-ordinate of the top-left corner of the rectangle from which ImageData is to be extracted.
3	width The width of the rectangle from which ImageData is to be extracted.
4	height The width of the rectangle from which ImageData is to be extracted.

Return value

A new ImageData object is returned using the existing ImageData object in the Canvas with the given size.

Example

The example creates a rectangle and gets the specified portion of ImageData using HTML Canvas getImageData method onto the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="350" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.fillStyle = 'purple';
         context.fillRect(10, 10, 200, 150);
         var data = context.getImageData(50, 50, 50, 50);
         context.putImageData(data, 250, 10);
      }
   </script>
</body>
</html>

Output

The output returned by the following code on the webpage as −

Example

The example draws text and gets the specified portion of ImageData using getImageData() method onto the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="600" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.font = '55px Verdana';
         context.fillText('This text is filled', 10, 50);
         var data = context.getImageData(10, 10, 100, 50);
         context.putImageData(data, 10, 80);
         var data1 = context.getImageData(200, 10, 100, 50);
         context.putImageData(data1, 150, 80);
         var data2 = context.getImageData(300, 10, 100, 50);
         context.putImageData(data2, 300, 80);
      }
   </script>
</body>
</html>

Output

The output returned by the following code on the webpage as −

html_canvas_images.htm