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