如何解决在线引入Fabric.js库后无法创建画布及绘图的问题？

以下是几个关键排查点和解决方案：

1. 确保HTML中存在对应ID的canvas元素 #

必须在HTML里定义一个id为c的canvas标签，并且显式设置宽高（通过HTML属性或CSS均可），否则画布会是0尺寸，无法显示内容：

<canvas id="c" width="800" height="600" style="border:1px solid #ccc;"></canvas>

2. 确保脚本在DOM加载完成后执行 #

如果JS代码写在<head>标签内，DOM还未渲染完成就执行，会找不到目标canvas元素。解决方式二选一：

• 将JS代码放在<body>标签的最后位置
• 用DOM加载事件包裹代码：

window.addEventListener('load', function() {
  var canvas = this.__canvas = new fabric.Canvas('c', {
    isDrawingMode: true
  });

  var rect = new fabric.Rect({
    top: 100,
    left: 100,
    width: 60,
    height: 70,
    fill: 'red',
  });
  canvas.add(rect);
  // Fabric.js在add元素后会自动调用renderAll，此行可省略
  // canvas.renderAll();
});

3. 验证Fabric.js是否成功加载 #

打开浏览器控制台（F12），输入fabric并回车，如果返回undefined，说明库未加载成功：

• 检查网络请求，确认https://unpkg.com/fabric@latest/dist/fabric.js是否能正常下载
• 可切换为指定版本的链接（如https://unpkg.com/fabric@5.3.0/dist/fabric.js），避免latest版本的兼容性问题

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <title>Fabric.js Test</title>
  <script src='https://unpkg.com/fabric@latest/dist/fabric.js'></script>
</head>
<body>
  <canvas id="c" width="800" height="600" style="border:1px solid #ccc;"></canvas>

  <script>
    window.addEventListener('load', function() {
      var canvas = new fabric.Canvas('c', {
        isDrawingMode: true
      });

      var rect = new fabric.Rect({
        top: 100,
        left: 100,
        width: 60,
        height: 70,
        fill: 'red',
      });
      canvas.add(rect);
    });
  </script>
</body>
</html>

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