HTML | canvas putImageData() Method
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 > |
chevron_right
filter_none
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