How to Copy Contents of One Canvas to Another Canvas Locally

In web development, you can copy the content of one HTML canvas to another using JavaScript. Here's a step-by-step guide with code examples to show how to do this:

Step 1: Set up the HTML structure

First, define two canvas elements in your HTML file:

html
<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>

Step 2: Draw content on the first canvas

Next, draw some content on the first canvas, such as a simple rectangle:

javascript
const canvas1 = document.getElementById('canvas1');
const ctx1 = canvas1.getContext('2d');

// Draw a red rectangle on the first canvas
ctx1.fillStyle = 'red';
ctx1.fillRect(10, 10, 100, 100);

Step 3: Copy the content from the first canvas to the second canvas

Then, copy the content of the first canvas to the second canvas:

javascript
const canvas2 = document.getElementById('canvas2');
const ctx2 = canvas2.getContext('2d');

// Copy canvas1's content to canvas2
ctx2.drawImage(canvas1, 0, 0);

The drawImage() method is key here. It can be used to draw images or copy the content of one canvas onto another. The first parameter can be an HTMLImageElement, HTMLVideoElement, or another HTMLCanvasElement. In this example, we pass the first canvas as the parameter to copy its content to the second canvas.

Complete Example Code

Combine the above code snippets into a single HTML file:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Copy Example</title>
</head>
<body>
    <canvas id="canvas1" width="200" height="200"></canvas>
    <canvas id="canvas2" width="200" height="200"></canvas>
    <script>
        const canvas1 = document.getElementById('canvas1');
        const ctx1 = canvas1.getContext('2d');

        ctx1.fillStyle = 'red';
        ctx1.fillRect(10, 10, 100, 100);

        const canvas2 = document.getElementById('canvas2');
        const ctx2 = canvas2.getContext('2d');

        ctx2.drawImage(canvas1, 0, 0);
    </script>
</body>
</html>

Using this method, you can easily copy graphical content from one canvas to another, which is particularly useful for developing complex image processing applications.

2024年8月14日 23:30 回复

1个答案

Step 1: Set up the HTML structure

Step 2: Draw content on the first canvas

Step 3: Copy the content from the first canvas to the second canvas

Complete Example Code

你的答案