HTML Canvas - putImageData() Method

The HTML Canvas putImageData() method fetches the available data from ImageData object and paints it onto the Canvas element.

If a dirty graphic is provided, the pixels from the graphics are taken and printed on canvas element.

Syntax

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

CanvasRenderingContext2D.putImageData(data, x, y, dx, dy, dwidth, dheight);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	data An ImageData object holding pixel array values.
2	x x co-ordinate position of image data object in Canvas
3	y y co-ordinate position of image data object in Canvas
4	dx x co-ordinate position of the top-left corner from which image data object is to be extracted.
5	dy y co-ordinate position of the top-left corner from which image data object is to be extracted.
6	dwidth width of the rectangle to be painted onto canvas which takes image data object width by default.
7	dheight height of the rectangle to be painted onto canvas which takes image data object height by default.

Return Value

A new Image data object is created and the available data is collected by the object and is painted onto the HTML Canvas element.

Example

The following example draws a circle on the canvas element and fetches a part of it using the method and draws the new ImageData object element on the canvas at the given co-ordinates.

<!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.arc(90, 90, 75, 1 * Math.PI, 5 * Math.PI);
         context.fillStyle = 'green';
         context.fill();
         var data = context.getImageData(100, 90, 50, 50);
         context.putImageData(data, 250, 25);
      }
   </script>
</body>
</html>

Output

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

Example

The following example draws a rectangle on the canvas element and fetches a part of it using the method and draws the new ImageData object element on the canvas at the given co-ordinates.

<!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.fillRect(15, 15, 200, 150);
         var data = context.getImageData(100, 90, 50, 50);
         context.putImageData(data, 250, 25, 15, 15, 75, 75);
      }
   </script>
</body>
</html>

Output

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

html_canvas_images.htm