Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to copy the content of one HTML5 Canvas to another Canvas locally?
The drawImage() method in HTML5 Canvas allows you to copy content from one canvas to another canvas locally within the same web page. This method can draw images, canvases, and videos onto a canvas element, making it perfect for duplicating or transferring canvas content.
Syntax
Following is the basic syntax for copying canvas content using drawImage() −
destinationContext.drawImage(sourceCanvas, dx, dy);
Where sourceCanvas is the source canvas element, and dx, dy are the destination coordinates on the target canvas.
How Canvas Copying Works
To copy canvas content, you need to obtain the 2D rendering context from your destination canvas, then use the drawImage() method passing the source canvas element directly. The source can be a HTMLCanvasElement, HTMLImageElement, or HTMLVideoElement.
Important: A canvas drawing context cannot be used as a source. If you have a canvas context as your source, access the original canvas element using context.canvas.
Basic Canvas to Canvas Copying
Example
Following example demonstrates copying the entire content from one canvas to another −
<!DOCTYPE html>
<html>
<head>
<title>Canvas to Canvas Copy</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Source Canvas</h3>
<canvas id="sourceCanvas" width="200" height="100" style="border: 1px solid #000;"></canvas>
<h3>Destination Canvas</h3>
<canvas id="destinationCanvas" width="200" height="100" style="border: 1px solid #000;"></canvas>
<br><button onclick="copyCanvas()">Copy Canvas</button>
<script>
// Draw on source canvas
var sourceCanvas = document.getElementById('sourceCanvas');
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = 'blue';
sourceCtx.fillRect(20, 20, 60, 40);
sourceCtx.fillStyle = 'red';
sourceCtx.fillRect(100, 30, 80, 50);
function copyCanvas() {
var destinationCanvas = document.getElementById('destinationCanvas');
var destinationCtx = destinationCanvas.getContext('2d');
// Copy entire source canvas to destination
destinationCtx.drawImage(sourceCanvas, 0, 0);
}
</script>
</body>
</html>
The source canvas contains a blue and red rectangle. Clicking "Copy Canvas" duplicates this content to the destination canvas.
Copying with Position and Scaling
The drawImage() method provides different parameter combinations for positioning and scaling −
// Copy at specific position destinationCtx.drawImage(sourceCanvas, dx, dy); // Copy with scaling destinationCtx.drawImage(sourceCanvas, dx, dy, dWidth, dHeight); // Copy portion of source canvas destinationCtx.drawImage(sourceCanvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Example − Scaled Canvas Copy
<!DOCTYPE html>
<html>
<head>
<title>Scaled Canvas Copy</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Original Canvas (200x100)</h3>
<canvas id="original" width="200" height="100" style="border: 1px solid #000;"></canvas>
<h3>Scaled Copy (300x150)</h3>
<canvas id="scaled" width="300" height="150" style="border: 1px solid #000;"></canvas>
<br><button onclick="copyWithScale()">Copy and Scale</button>
<script>
var originalCanvas = document.getElementById('original');
var originalCtx = originalCanvas.getContext('2d');
// Draw circle on original canvas
originalCtx.fillStyle = 'green';
originalCtx.beginPath();
originalCtx.arc(100, 50, 30, 0, 2 * Math.PI);
originalCtx.fill();
function copyWithScale() {
var scaledCanvas = document.getElementById('scaled');
var scaledCtx = scaledCanvas.getContext('2d');
// Copy and scale up by 1.5x
scaledCtx.drawImage(originalCanvas, 0, 0, 300, 150);
}
</script>
</body>
</html>
This example scales the original 200x100 canvas to 300x150 pixels when copying, making the green circle appear larger.
Copying Partial Canvas Content
You can copy only a specific portion of the source canvas using the full parameter syntax −
Example − Partial Canvas Copy
<!DOCTYPE html>
<html>
<head>
<title>Partial Canvas Copy</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Source Canvas</h3>
<canvas id="source" width="200" height="200" style="border: 1px solid #000;"></canvas>
<h3>Partial Copy (Top-Left Quarter)</h3>
<canvas id="partial" width="100" height="100" style="border: 1px solid #000;"></canvas>
<br><button onclick="copyPartial()">Copy Partial</button>
<script>
var sourceCanvas = document.getElementById('source');
var sourceCtx = sourceCanvas.getContext('2d');
// Draw colorful rectangles
sourceCtx.fillStyle = 'purple';
sourceCtx.fillRect(0, 0, 100, 100);
sourceCtx.fillStyle = 'orange';
sourceCtx.fillRect(100, 0, 100, 100);
sourceCtx.fillStyle = 'yellow';
sourceCtx.fillRect(0, 100, 100, 100);
sourceCtx.fillStyle = 'pink';
sourceCtx.fillRect(100, 100, 100, 100);
function copyPartial() {
var partialCanvas = document.getElementById('partial');
var partialCtx = partialCanvas.getContext('2d');
// Copy only the top-left purple square (0,0,100,100) to destination (0,0,100,100)
partialCtx.drawImage(sourceCanvas, 0, 0, 100, 100, 0, 0, 100, 100);
}
</script>
</body>
</html>
This example copies only the purple top-left quarter of the source canvas to the smaller destination canvas.
Common Use Cases
Canvas-to-canvas copying is commonly used for −
Creating thumbnails − Scale down a large canvas to create a smaller preview.
Image manipulation − Apply filters or effects by copying to a temporary canvas.
Layer composition − Combine multiple canvas layers into a final output canvas.
Animation frames − Save previous frames for comparison or blending effects.
Performance Considerations
When copying canvas content frequently, consider these optimization tips −
Cache the canvas contexts instead of retrieving them repeatedly with
getContext().Copy only the required portion rather than the entire canvas when possible.
Use
requestAnimationFrame()for smooth animation when copying canvases repeatedly.
Conclusion
The drawImage() method provides a simple and efficient way to copy content between HTML5 canvases locally. Whether you need full copying, scaling, or partial content transfer, this method handles all scenarios while maintaining good performance for real-time applications.
3K+ Views
