Skip to content
Related Articles

Related Articles

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

The putImageData() method is used to put the image data back to the canvas from a specified ImageData object.

Syntax:

context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

Parameter Values:

  • imgData: It is used to specify the ImageData object to put back to the canvas.
  • x: It is the x-coordinate of the upper-left corner of the ImageData object. It is in pixels.
  • y: It is the y-coordinate of the upper-left corner of the ImageData object. It is in pixels.
  • dirtyX: It is the horizontal(x) value that denotes where to place the image on the canvas. It is in pixels and optional.
  • dirtyY: It is the vertical(y) value that denotes where to place the image on the canvas. It is in pixels and optional.
  • dirtyWidth: It is the width used to draw the image on the canvas. It is also optional.
  • dirtyHeight: It is the height used to draw the image on the canvas. It is also optional.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h2 style="color:green;">PutImageData() Method</h2>
        <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()">PutImageData</button>
    </center>
</body>
  
</html>

chevron_right


Output:
Before click:



After click:

Supported Browsers: The browsers supported by HTML canvas putImageData() Method are listed below:

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :