HTML canvas putImageData() Method
Last Updated :
12 Jun, 2023
The putImageData() method is used to put the image data back to the canvas from a specified ImageData object.
Syntax:
context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
Parameter Values:
- imgData: It is used to specify the ImageData object to put back to the canvas.
- x: It is the x-coordinate of the upper-left corner of the ImageData object. It is in pixels.
- y: It is the y-coordinate of the upper-left corner of the ImageData object. It is in pixels.
- dirtyX: It is the horizontal(x) value that denotes where to place the image on the canvas. It is in pixels and optional.
- dirtyY: It is the vertical(y) value that denotes where to place the image on the canvas. It is in pixels and optional.
- dirtyWidth: It is the width used to draw the image on the canvas. It is also optional.
- dirtyHeight: It is the height used to draw the image on the canvas. It is also optional.
Example:
<!DOCTYPE html>
< html >
< body >
< center >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h2 style = "color:green;" >PutImageData() Method</ h2 >
< 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()" >PutImageData</ button >
</ center >
</ body >
</ html >
|
Output:
Before click:
After click:
Supported Browsers: The browsers supported by HTML canvas putImageData() Method are listed below:
- Chrome
- Mozilla Firefox
- Internet Explorer 9.0
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...