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