Skip to content
Related Articles

Related Articles

HTML | canvas getImageData() Method
  • Last Updated : 16 Oct, 2019

The getImageData() method is used to copy the pixel data for the specified rectangle on a canvas.

There are 4 pieces of information for every pixel in an ImageData object i.e. the RGBA values:

  • R denotes the red color. It ranges from 0 to 255.
  • G denotes the green color. It ranges from 0 to 255.
  • B denotes the blue color. It ranges from 0 to 255.
  • A denotes the alpha channel. It also ranges from 0 to 255 i.e. 0 is transparent and 255 is fully visible

Syntax:

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

Parameter Values:

  • x: It is used to specify the x coordinate (in pixels) of the upper-left corner from whhere the copy to be started.
  • y: It is used to specify the x coordinate (in pixels) of the upper-left corner from where the copy to be started.
  • width: It is the width of the rectangular area to be copied.
  • height: It is the height of the rectangular area to be copied.

Example:






<!DOCTYPE html>
<html>
  
<body>
  
    <h3 style="color:green; "> GeeksforGeeks</h3>
    <h3 style="color:green; "> GetImageData() Method</h3>
    <canvas id="gfgCanvas" 
            width="300" 
            height="300"
            style="border:1px solid ;">
    </canvas>
  
    <script>
        var gfg = document.getElementById("gfgCanvas");
        var context = gfg.getContext("2d");
        context.fillStyle = "green";
        context.fillRect(55, 50, 200, 100);
  
        function putImage() {
            // getImageData is used to copy the pixels
            var imageData = context.getImageData(55, 50, 200, 100);
            context.putImageData(imageData, 55, 170);
        }
    </script>
    <br>
    <button onclick="putImage()">GetImageData</button>
  
</body>
  
</html>

Output:
Before click:

After click:

Supported Browsers:

  • Chrome
  • Mozilla Firefox
  • Internet Explorer 9.0
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :