HTML Canvas - ImageData() Method

The ImageData interface contains pixel data of a particular area inside the Canvas element. To manipulate the pixel data, we can use ImageData() constructor on the CanvasRenderringContext2D interface context object.

The HTML Canvas ImageData() method of Canvas 2D API is used when there is a need to draw graphics onto the canvas element using Image properties and methods.

Syntax

Following is the syntax of HTML Canvas ImageData method −

CanvasRenderringContext2D.ImageData(dataset, width, height, features);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	Dataset The dataset is an array representing 2D pixels of the required image which is given using one of the following values. Uint8ClampedArray Uint16Array Float32Array If none of the values are passed as the parameter, a transparent black rectangle is formed with the given width and height.
2	Width An integer value which helps to determine the width of ImageData() object inside the Canvas element.
3	Height An integer value which helps to determine the height of ImageData() object inside the Canvas element.
4.	Features The constructor accepts a color-palette feature which is used to draw inside the Canvas element. It accepts the following values. srgb rec2020 display-p3

Return values

A CanvasRenderringContext2D object is used to create a new ImageData() object.

Example

The following example demonstrates how we can add color to the HTML Canvas ImageData() method object using an index array.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Imagedata();">
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Imagedata() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         const array = new Uint8ClampedArray(40000);
         for (let i = 0; i < array.length; i += 4) {
            array[i + 0] = 200;
            array[i + 1] = 190;
            array[i + 2] = 180;
            array[i + 3] = 170;
         }
         let img_data = new ImageData(array, 100);
         context.putImageData(img_data, 80, 50);
      }
   </script>
</body>
</html>

Output

The output image object generated by the above code is −

Example

The following program draws a rectangular solid color image onto the image using the method ImageData().

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="220" height="180" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      const array = new Uint8ClampedArray(50000);
      for (let i = 0; i < array.length; i += 4) {
         array[i + 0] = 222;
         array[i + 1] = 111;
         array[i + 2] = 11;
         array[i + 3] = 500;
      }
      let imgdata = new ImageData(array, 100);
      context.putImageData(imgdata, 50, 20);
   </script>
</body>
</html>

Output

The output returned by the image on the webpage as −

html_canvas_images.htm