Fabric JS绘制圆形时为何清除Canvas背景？如何保留背景？

问题原因 #

Fabric JS的渲染机制是每次重绘（比如添加图形时自动触发的renderAll()）会清空画布，只渲染它自身管理的对象集合。如果你的Canvas背景图是通过原生Canvas API绘制的，或者没有被加入Fabric的对象列表中，Fabric执行渲染操作时，就会把不在其管理范围内的原有背景清除掉。

解决方法 #

根据你的场景选择对应的方案：

方案1：将原生Canvas的背景图转为Fabric Image对象 #

如果背景图已经通过原生Canvas绘制完成，先把它转为Fabric可管理的Image对象，再初始化Fabric Canvas并添加该对象：

// 获取原生Canvas元素
const nativeCanvas = document.getElementById('yourCanvasId');
// 将原生Canvas内容转为DataURL格式的图片
const bgImageData = nativeCanvas.toDataURL();

// 初始化Fabric Canvas
const fabricCanvas = new fabric.Canvas('yourCanvasId');

// 将背景图转为Fabric Image对象并添加到画布
fabric.Image.fromURL(bgImageData, function(img) {
  img.set({
    left: 0,
    top: 0,
    selectable: false, // 设为不可选中，防止误操作
    evented: false // 屏蔽交互事件，避免干扰上层图形
  });
  // 把背景图放在最底层
  fabricCanvas.add(img).sendToBack(img);
  
  // 现在绘制圆形
  const circle = new fabric.Circle({
    radius: 50,
    fill: '#ff0000',
    left: 100,
    top: 100
  });
  fabricCanvas.add(circle);
});

方案2：直接用Fabric设置画布背景图 #

如果还未绘制背景图，直接通过Fabric的API设置画布背景，这样背景会被Fabric管理，不会被清除：

const fabricCanvas = new fabric.Canvas('yourCanvasId');

// 设置画布背景图（替换为你的背景图路径）
fabricCanvas.setBackgroundImage('bg-image.jpg', fabricCanvas.renderAll.bind(fabricCanvas), {
  backgroundImageOpacity: 1,
  backgroundImageStretch: false // 保持原图尺寸，按需调整
});

// 添加圆形
const circle = new fabric.Circle({
  radius: 50,
  fill: '#ff0000',
  left: 100,
  top: 100
});
fabricCanvas.add(circle);

注意事项 #

• 避免混合使用原生Canvas API和Fabric JS操作同一个画布，所有需要保留的内容都要转为Fabric的对象（Image、Shape、Text等）并加入画布的对象集合。
• 若后续还要通过原生API绘制内容，绘制完成后需重复方案1的步骤，将原生内容转为Fabric对象加入，否则Fabric重绘时会清除这部分内容。

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