HTML | canvas getImageData() Method

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before click:

After click:

Supported Browsers:

  • Chrome
  • Mozilla Firefox
  • Internet Explorer 9.0
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.