点击画布旁按钮打开新窗口全屏显示Fabric Canvas失败，求排查

原代码存在的核心问题： #

• 新窗口DOM未就绪就初始化Fabric：直接创建canvas后就调用fabric.Canvas，新窗口的document可能还未完成渲染，导致Fabric无法找到目标canvas元素。
• 未实现真正全屏：仅设置canvas宽高等于窗口inner尺寸，但未清除body默认边距、未调用全屏API，会出现留白或滚动条。
• Fabric依赖缺失：新窗口默认不会继承父窗口的脚本，fabric对象可能不存在，直接抛出错误。
• 跨窗口数据访问限制：jsonData.value是父窗口变量，新窗口可能无法直接读取，导致加载失败。

修正后的代码： #

const openCanvasPopup = () => {
  const newWindow = window.open("", "_blank");
  if (!newWindow) return;

  // 等待新窗口DOM加载完成后再执行后续操作
  newWindow.onload = () => {
    // 清除body默认样式，消除留白与滚动条
    newWindow.document.body.style.margin = '0';
    newWindow.document.body.style.padding = '0';
    newWindow.document.body.style.overflow = 'hidden';

    // 创建全屏canvas元素
    const newCanvasElement = document.createElement('canvas');
    newCanvasElement.id = "canvasPopup";
    // 样式层占满窗口
    newCanvasElement.style.width = '100vw';
    newCanvasElement.style.height = '100vh';
    // 画布分辨率匹配屏幕（解决模糊问题）
    const pixelRatio = window.devicePixelRatio || 1;
    newCanvasElement.width = newWindow.screen.width * pixelRatio;
    newCanvasElement.height = newWindow.screen.height * pixelRatio;

    newWindow.document.body.appendChild(newCanvasElement);

    // 确保新窗口能访问Fabric
    if (!newWindow.fabric) {
      // 动态加载Fabric脚本（替换为你实际使用的版本地址）
      const script = newWindow.document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js';
      script.onload = initCanvas;
      newWindow.document.head.appendChild(script);
    } else {
      initCanvas();
    }

    // 初始化Fabric画布并加载数据
    function initCanvas() {
      const newCanvas = new newWindow.fabric.Canvas('canvasPopup');
      // 深拷贝数据，避免跨窗口作用域问题
      const canvasJson = JSON.parse(JSON.stringify(jsonData.value));
      newCanvas.loadFromJSON(canvasJson, () => {
        newCanvas.renderAll();
        // 请求新窗口进入全屏模式（兼容主流浏览器）
        const docEl = newWindow.document.documentElement;
        if (docEl.requestFullscreen) {
          docEl.requestFullscreen();
        } else if (docEl.webkitRequestFullscreen) {
          docEl.webkitRequestFullscreen();
        } else if (docEl.msRequestFullscreen) {
          docEl.msRequestFullscreen();
        }
      });
    }
  };
};

关键修复点说明： #

1. 用newWindow.onload确保新窗口DOM完全渲染后再操作元素。
2. 清除body默认边距并隐藏滚动条，保证canvas无留白。
3. 动态加载Fabric脚本，解决新窗口依赖缺失问题。
4. 深拷贝JSON数据，避免跨窗口作用域访问限制。
5. 调用标准全屏API并做浏览器兼容，实现真正的全屏效果。
6. 匹配设备像素比设置canvas分辨率，避免画布模糊。

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