HTML Reference Manual

HTML Tag Reference

HTML canvas putImageData() method

putImageData() is Canvas 2D API draws data from an existing ImageData object to a bitmap method. If a drawn rectangle is provided, only the pixels of that rectangle are drawn. This method is not affected by the canvas transformation matrix.

HTML canvas reference manual

Online Example

The following code uses getImageData() to copy the pixel data of a specified rectangle on the canvas, and then uses putImageData() to place the image data back onto the canvas:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas getImageData() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
　　　　var imgData=ctx.getImageData(10,10,50,50);
　　　　ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">Copy</button>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support the putImageData() method.

Note:Internet Explorer 8 Previous versions do not support the <canvas> element.

Definition and Usage

The putImageData() method places the image data (from the specified ImageData object) back onto the canvas.

Tip:See getImageData() A method that can copy the pixel data of a specified rectangle on the canvas.

Tip:See createImageData() Method that can create a new blank ImageData object.

JavaScript Syntax

JavaScript Syntax:	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

Parameter Value

Parameter	Description
imgData	Specifies the ImageData object to be placed back on the canvas.
x	The x-coordinate of the top-left corner of the ImageData object, in pixels.
y	The y-coordinate of the top-left corner of the ImageData object, in pixels.
dirtyX	Optional. The horizontal value (x), in pixels, for the position of the image on the canvas.
dirtyY	Optional. The vertical value (y), in pixels, for the position of the image on the canvas.
dirtyWidth	Optional. The width used to draw an image on the canvas.
dirtyHeight	Optional. The height used to draw an image on the canvas.

　HTML canvas reference manual

HTML: <template> tag