最高效Canvas-To-Canvas复制是用drawImage()复用离屏canvas：需显式设置像素宽高（含DPI适配），预绘制静态内容并按需重绘，主canvas中仅调用drawImage()贴图，注意跨域图片污染问题。
直接用 drawImage() 从一个 canvas 复制到另一个 canvas，是实现 Canvas-To-Canvas 离屏绘图复制最常用、也最高效的方式。关键不在于“能不能复制”，而在于“怎么组织才能真正提升性能”——核心是把高成本绘制提前固化、按需复用，避免每帧重复计算。
创建并配置离屏Canvas
离屏 canvas 不插入 DOM，但必须显式设置像素尺寸（不能靠 CSS）：
- 用
document.createElement('canvas')创建 - 手动赋值
width和height（例如offscreen.width = 1024; offscreen.height = 768;） - 高 DPI 设备下需适配：若主 canvas 按
window.devicePixelRatio缩放，离屏 canvas 也要同比例设置宽高，否则图像模糊或错位
一次性预绘制静态内容
把那些更新极少、但绘制开销大的内容（如 UI 背景、地图底图、带阴影的文字按钮）集中画到离屏 canvas 上：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 获取其 2D 上下文：
const offCtx = offscreen.getContext('2d'); - 只在内容真实变化时重绘（比如配置加载完成、主题切换后），不要放进动画循环里反复调用
- 可合并路径、复用样式、避免循环内设
fillStyle等，进一步压缩首次绘制耗时
主Canvas中高效复用
动画或交互帧中，不再重绘复杂图形，只用一次 drawImage() 把整个离屏 canvas 图像贴过去：
立即学习“前端免费学习笔记（深入）”；
-
ctx.drawImage(offscreen, x, y)—— 最简形式，位置平移 -
ctx.drawImage(offscreen, dx, dy, dw, dh)—— 支持缩放/裁剪 - 即使加了
globalAlpha、transform或clip，只要离屏 canvas 本身没被污染（无跨域图、无未加载资源），都能正确生效
注意安全与兼容边界
跨域图片会导致离屏 canvas “被污染”，后续无法读取或作为源 canvas 使用：
- 所有用于离屏绘制的
<img>必须设置crossOrigin = 'anonymous'，且服务端响应头含Access-Control-Allow-Origin -
cloneNode(true)不克隆像素，仅复制 DOM 结构；toDataURL()在污染状态下返回空白，不可用于判断是否就绪 - 需要像素级操作（如滤镜）时，改用
getImageData()+putImageData()，但注意性能开销较大，慎用于高频帧
