使用fabric.js 1.7.21调用canvas.clear()报错：Uncaught TypeError咨询

你遇到的这个报错核心原因很明确：Fabric.js 1.7.21版本并不提供canvas.clear()这个方法——这个便捷的清除画布方法是在Fabric.js 2.x及更高版本才新增的，旧版1.x系列里没有这个API，所以调用它会触发类型错误。

正确的清除画布方案（适配1.7.21） #

在1.7.21中，要清空画布上的所有元素，需要手动遍历画布上的所有对象并逐个移除，之后再调用renderAll()更新视图。修改你的clearcan函数如下：

function clearcan() {
  var txt;
  if (confirm("Chuck this?") == true) {
    // 遍历并移除画布上的所有对象
    canvas.getObjects().forEach(function(object) {
      canvas.remove(object);
    });
    // 重新渲染画布
    canvas.renderAll();
    newleft = 0;
  }
}

可选优化：保留背景（如果有设置） #

如果你给画布添加了背景图或背景色，不想把背景也清除，可以在遍历的时候加个判断，只移除非背景对象：

canvas.getObjects().forEach(function(object) {
  // 跳过背景类型的对象
  if (!(object instanceof fabric.BackgroundImage) && !object.backgroundColor) {
    canvas.remove(object);
  }
});

额外检查点 #

还要确认你的canvas变量是全局作用域可访问的——因为你在clearcan函数里直接使用了canvas，如果它是某个局部函数内定义的变量，也会出现类似“找不到”的错误。

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