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