如何将Canvas导出的dataURL作为图片渲染到另一个Canvas上

导致内容不显示的核心问题有3个：

• 错误修改了DataURL的MIME类型：你调用replace把导出的DataURL标识从image/png改成了image/octet-stream，浏览器会把这个资源识别为通用二进制文件，不会按图片解析，直接导致图片加载失败。
• onload事件绑定顺序错误：你先给img.src赋值，再绑定onload回调，如果导出的DataURL已经在缓存中，onload事件会在绑定完成前触发，导致绘制逻辑不会执行。
• drawImage调用未适配目标canvas尺寸：你当前只传了绘制坐标，默认使用图片原始尺寸绘制，如果原始尺寸和第二个canvas的尺寸不匹配，可能出现内容超出可视区域的问题。

// 导出时保留原生image/png MIME类型，不要做替换
const image = canvas.toDataURL("image/png");

const compCanvas = document.getElementById("final-composition");
const ctx = compCanvas.getContext("2d");
const img = new Image();

// 先绑定加载完成回调，再赋值src，避免缓存导致事件漏触发
img.onload = function(){
    // 绘制时传入目标canvas的宽高，自动适配尺寸
    ctx.drawImage(img, 0, 0, compCanvas.width, compCanvas.height);
};
img.src = image;

内容的提问来源于stack exchange，提问作者weirdFont