html tutorial - putImageData() Method in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - Putimagedata method in html5 canvas - html examples - html programs
- The putImageData() method is one of the canvas method.
- This method is used to puts the image data (from a specified ImageData object) back onto the canvas.
Syntax for putImageData() Method in HTML5 Canvas:
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
Parameter values for putImageData() Method in HTML5 Canvas:
Parameter | Description |
---|---|
imgData | To specifies imageData object to put back on the canvas. |
x | To start copy from upper left corner the x-coordinate in pixels. |
y | To start copy from upper left corner the y-coordinate in pixels |
dirty x | The horizontal (x) value is used, where to place the image on the canvas in pixels. |
dirty y | The vertical (y) value is used, where to place the image on the canvas in pixels. |
dirtyWidth | The width is used to draw the image on the canvas. |
dirtyHeight | The height is used to draw the image on the canvas. |
Sample Coding for putImageData() Method in HTML5 Canvas:
Tryit<!DOCTYPE html>
<html>
<head>
<title>wikitechy-putImageData() method in Canvas</title>
</head>
<body>
<h2>Wikitechy-putImageData() method in canvas</h2>
<canvas id="wikitechyCanvas" width="500" height="250"
style="border:1px solid #d3d3d3;">
</canvas>
<script>
var p = document.getElementById("wikitechyCanvas");
var context = p.getContext("2d");
context.fillStyle = "green";
context.fillRect(50, 50, 100, 80);
function copy()
{
var imgData = context.getImageData(50, 50, 100, 80);
context.putImageData(imgData, 200, 50);
}
</script>
<button onclick="copy()">Copy</button>>
</body>
</html>
Code Explanation for putImageData() Method in HTML5 Canvas:

- ”wikitechyCanvas” is used to declare the id value of the canvas tag.
- getElementById: method is used to draw the element from canvas id value.
- getContext(): returns an object that provides methods and properties for drawing on the canvas.
- The fillStyle property is used to fill the green color in rectangle.
- To create a rectangle the value is set as (50, 50, 100, 80) in (x,y,width,height) axis.
- The getImageData(50, 50, 100, 80) is used to copy the above rectangle.
- The image will put back on the canvas using putImageData (imgData,200 ,50 ).
- button is used to copy the rectangle.
Output for putImageData() Method in HTML5 Canvas:

- <canvas> is used to draw a rectangle with gray color border.
- canvas is used to draw a rectangle an putImageData() method.
- Here the output is displayed by green color rectangle.
-The first rectangle is displayed by (50, 50, 100, 80) in (x,y,width,height) axis. - The putImageData(imgData,200 ,50 ) is used for copy the rectangle and display the image back on the canvas.
Browser Support for putImageData() Method in HTML5 Canvas:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |
Tips and Notes
- The getImageData() methodis used to copies the pixel data for a specified rectangle on a canvas.
- The createImageData() method is used to creates a new, blank ImageData object.