Open In App

HTML canvas getImageData() Method

Last Updated : 12 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 where 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: 
 

html




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

 



Previous Article
Next Article

Similar Reads

HTML canvas rect() Method
The rect() method in HTML is used to create a rectangle in HTML. Syntax: context.rect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the height in pixel. Example-1: C/C++
1 min read
HTML canvas clearRect() Method
The clearRect() method is used to clear the specified pixels within a given rectangle. Syntax: context.clearRect( x, y, width, height ) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixel.height: It stores the heig
1 min read
HTML canvas strokeRect() Method
The strokeRect() method is used to draw the rectangle in a given color. The default color of the stroke is black. Syntax: context.strokeRect(x, y, width, height) Parameters: x: It stores the x-coordinate of the top-left corner of the rectangle.y: It stores the y-coordinate of the top-left corner of the rectangle.width: It stores the width in pixels
1 min read
HTML canvas fillRect() Method
The fillRect() method is used to fill the rectangle using the given color. The default color of the fillRect() method is black. Syntax: context.fillRect( x, y, width, height ) Parameters: This method accepts four parameters as mentioned above and described below: x: It stores the x-coordinate of top-left corner of rectangle.y: It stores the y-coord
1 min read
HTML canvas fill() Method
The canvas fill() Method is used to fill the current drawing path. The default color of the canvas fill() method is black. Syntax: context.fill() Example-1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML canvas fill() Method &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id=&quot;GFG&quot; width=&quot;500&quot;
1 min read
HTML canvas stroke() Method
The canvas stroke() method is used to draw the path you have defined with all those moveTo() and lineTo() methods. The default color of the canvas stroke() method is black. Syntax: context.stroke() Example-1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML canvas stroke() Method &lt;/title&gt; &lt;/head&gt; &lt;body
1 min read
HTML canvas translate() Method
The HTML canvas translate() Method is used to specify that the object is translated by given translate amount. Syntax: context.translate(x, y) Parameter Values: x: It stores the value, that how much the canvas will move left or right means x-axis wise.y: It stores the value, that how much the canvas will move up and down means y-axis wise. Example
2 min read
HTML canvas rotate() Method
The HTML canvas rotate() Method is used to rotate the drawing by a given angle. Note that the rotation will only work on the canvas that was made after the rotation was done. Syntax: context.rotate(angle) Parameter Values: angle: It stores the rotation angle in radians. If the angle is given in the form of a degree then it converts into a radian by
1 min read
HTML canvas scale() Method
The HTML canvas scale() Method is used to scale the current drawing into smaller or larger size. After scaling the drawing, all the feature of drawing scaled. It will have to define before the canvas. Syntax: context.scale( scalewidth, scaleheight ) Parameter Values: scalewidth: It scale the width of current drawing, (1=100%, 0.5=50%, 2=200%, and s
2 min read
HTML canvas createLinearGradient() Method
The HTML Canvas createLinearGradient() method is used to create a linear gradient object. The gradient can be used to fill different colors in rectangles, circles, lines, text, etc. We can then assign the gradient color to the strokeStyle or fillStyle properties to fill or draw shapes such as rectangles, circles, lines, text, etc. The addColorStop(
2 min read