Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to copy the content of one HTML5 Canvas to another Canvas locally?
The drawImage() method is used to draw image, canvas and videos on canvas. It can also draw part of image and increase or decrease the image size.
Example
Let us see an example −
//context grabbed from your destination canvas
ctx = destinationCanvas.getContext('2d');
//drawImage() called passing the source canvas directly
dCtx.drawImage(sourceCanvas, 0, 0);In this code, firstly the image is copied from the source canvas. The sourceCanvas can be a HTMLImageElement, HTMLVideoElement, or a HTMLCanvasElement. A canvas drawing context cannot be used as a source. If a canvas drawing context is your source canvas then there is a reference to the original canvas element on the context under context.canvas
The latter code uses drawImage() method to copy context from source canvas to the desired canvas.
Updated on: 03-Mar-2020
2K+ Views
Advertisements