HTML canvas putImageData() Method

Last Updated : 12 Jun, 2023

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:

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