Returns an ICanvasImageData object that represents the pixel data for the specified rectangle on a canvas. Use the data property to get a CanvasPixelArray to manipulate individual pixel data.
.png){kind=icon}
.png){kind=icon} |
Syntax
var retval = CanvasRenderingContext2D.getImageData(sx, sy, sw, sh);Parameters
- sx [in]
-
Type: Floating-point
The x-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.
- sy [in]
-
Type: Floating-point
The y-coordinate, in pixels, of the upper-left corner of the rectangle in relation to the coordinates of the canvas.
- sw [in]
-
Type: Floating-point
The width, in pixels, of the rectangle in relation to the coordinates of the canvas.
- sh [in]
-
Type: Floating-point
The height, in pixels, of the rectangle in relation to the coordinates of the canvas.
Return value
Type: ICanvasImageData
A CanvasImageData object with pixel information from the canvas within the specified coordinates.
Standards information
- HTML Canvas 2D Context, Section 13
Remarks
If the rectangle contains pixels outside the canvas, they are returned as transparent black.
Examples
The following code example draws some shapes on one canvas and copies the data to a second canvas.
<html>
<head>
<title>Get and Put image data sample</title>
<style type="text/css">
#MyCanvas {
border:1px solid red;
}
#YourCanvas {
border:1px solid blue;
}
</style>
<script type="text/javascript">
function draw() {
// get first canvas and draw image
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(5, 5, 300, 250);
ctx.stroke();
ctx.arc(150, 150, 100, 0, Math.PI, false);
ctx.stroke();
}
}
function clone() {
// get both canvases, and copy image
var canvas1 = document.getElementById("MyCanvas");
var canvas2 = document.getElementById("YourCanvas");
if (canvas1.getContext) {
var ctx = canvas1.getContext("2d"); // Get the context on the first canvas.
var imageStuff = ctx.getImageData(0, 0, canvas1.width, canvas1.height); // Get image data from the first canvas.
}
if (canvas2.getContext) {
var ctx2 = canvas2.getContext("2d"); // Get the context on the second canvas.
ctx2.putImageData(imageStuff, 0, 0); // Put image data on the second canvas.
}
}
</script>
</head>
<body onload="draw();">
Click image to copy canvas to canvas
<div>
<canvas id="MyCanvas" width="400" height="400" onclick="clone();" >This browser or document mode doesn't support canvas</canvas>
<canvas id="YourCanvas" width="400" height="400">This browser or document mode doesn't support canvas</canvas>
</div>
</body>
</html>
See also
Send comments about this topic to Microsoft
Build date: 11/28/2012
