How to copy the contents of one canvas to another canvas locally with JavaScript?

Spread the love

Sometimes, we want to copy the contents of one canvas to another canvas locally with JavaScript.

In this article, we’ll look at how to copy the contents of one canvas to another canvas locally with JavaScript.

How to copy the contents of one canvas to another canvas locally with JavaScript?

To copy the contents of one canvas to another canvas locally with JavaScript, we call the drawImage method.

For instance, we write

const destCtx = destinationCanvas.getContext("2d");
destCtx.drawImage(sourceCanvas, 0, 0);

to get the destination canvas’ context with destinationCanvas.getContext.

Then we call drawImage on it with the sourceCanvas to draw the stuff in sourceCanvas in the destination canvas.

Conclusion

To copy the contents of one canvas to another canvas locally with JavaScript, we call the drawImage method.

Leave a Reply

Your email address will not be published. Required fields are marked *