
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
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.
- Related Articles
- How to center canvas in HTML5?
- How to detect point on canvas after canvas rotation in HTML5
- HTML5 Canvas to PNG File
- HTML5 Canvas fit to window
- How to draw lines using HTML5 Canvas?
- How to use images with HTML5 canvas?
- How to save HTML5 canvas data to file?
- Translating HTML5 canvas
- HTML5 Canvas distorted
- HTML5 Canvas Transformation
- How to save and restore the HTML5 Canvas states?
- Zoom HTML5 Canvas to Mouse Cursor
- How to draw an oval in HTML5 canvas?
- How to apply antialiasing in HTML5 canvas drawImage()?
- How to draw large font on HTML5 Canvas?

Advertisements