Example
Copy the pixel data for a rectangle with getImageData().
Then put the image data back onto the canvas with putImageData():
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
const imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
Try it Yourself »
Description
The
putImageData()
method puts the image data (from a specified ImageData object)
back onto the canvas.
See Also:
The createImageData() Method
The getImageData() Method
The imageData.height Property
The imageData.width Property
The imageData.data Property
Syntax
context
.putImageData(
imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight
)
Parameter Values
Param
Description
imgData
The ImageData object to put on the context.
The x-coordinate, in pixels, of the the image.
The y-coordinate, in pixels, of the image.
dirtyX
Optional. The x coordinate. Default: 0.
dirtyY
Optional. The y coordinate. Default: 0.
dirtyWidth
Optional. The width. Default: the width of the extracted image.
dirtyHeight
Optional. The height. Default: the height of the extracted image.
Contact Sales
If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com
Report Error
If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our
terms of use
,
cookies
and
privacy policy
.
W3Schools is Powered by W3.CSS
.
