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