canvas 绘制 到 canvas

Canvas 是 HTML5 提供的一种绘图技术，它是一个二维图形绘制区域，用于在网页上动态渲染图形、动画等效果。将内容从一个 Canvas 绘制到另一个 Canvas 主要通过复制画布的内容，这通常涉及到以下几个步骤：

1. **获取源 Canvas**：首先你需要得到你想复制内容的那个画布的 `CanvasRenderingContext2D` 对象。例如：

   const sourceCanvas = document.getElementById('source-canvas');
   const sourceCtx = sourceCanvas.getContext('2d');

2. **创建目标 Canvas**：如果你需要一个新的画布，可以创建并设置其宽度和高度。

   const destCanvas = document.createElement('canvas');
   const destCanvasWidth = ...;
   const destCanvasHeight = ...;
   destCanvas.width = destCanvasWidth;
   destCanvas.height = destCanvasHeight;
   const destCtx = destCanvas.getContext('2d');

3. **复制画布内容**：你可以使用 `drawImage()` 方法从源 canvas 上复制图像数据到目标 canvas，支持多种模式如 `copySource` 或 `destination-over` 等。

   destCtx.drawImage(sourceCanvas, 0, 0, // 起始位置
                      sourceCanvas.width, sourceCanvas.height, // 大小
                      0, 0, destCanvasWidth, destCanvasHeight); // 目标位置及大小

4. **替换或组合**：完成复制后，可以选择直接替换目标 canvas 的内容，或者将新内容与其他现有内容合并。