Aquileo | HTML canvas putImageData() Method

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:

html

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

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

HTML canvas putImageData() Method

Explore