Javascript 在fabricjs的另一个画布上添加自由绘图结果

有两个画布实例，较小的“d”用于自由绘制，较大的“c”将添加到画布上。我如何才能只将“d”上的绘图边界添加到“c”，而不是将整个“d”画布区域（其中有大量空白区域）添加到“c”

我希望代码能解释得更清楚。谢谢

HTML

<canvas width="300" height="300" id="c"></canvas>
<canvas width="150" height="150" id="d"></canvas>
<button id="btn">add To c</button>

---

我用更好的东西更新了你的小提琴。

Canvas.toSVG（）不能用作导出导入函数

我建议您循环浏览画布对象，并在新画布中克隆所有对象。 这个演示并不是真的克隆它们，只是在另一个画布上复制它们。 如果不进行克隆，则会产生一个副作用，即如果在一个画布中修改某些内容，则修改会在另一个画布中镜像。 你应该加上

c.add(ao[i].clone());

但由于某些原因，自由绘图路径.clone（）失败。（将在接下来的几天中查看这是一个bug还是一个误用）

---

希望有帮助。

最后我找到了问题的答案，只需使用fabric.Group和.clone（）方法：

---

特别感谢@AndreaBogazzi，祝你有个好日子

抱歉，我尝试了几次，仍然无法发布我的问题。我是stackoverflow的初学者。道歉。不需要道歉，你上次的更新很好！谢谢@AndreaBogazzi，你的小提琴似乎把每一幅画/路径都单独添加到了“c”上，这并不是我想要的。但多亏了你的想法，我更新了这个，而fabric.Group是拯救的正确方法。非常感谢！我喜欢看到人们如此频繁地使用fabricJs。

c.add(ao[i].clone());

var c = new fabric.Canvas('c')
var d = new fabric.Canvas('d', {
    isDrawingMode: true
})

document.getElementById('btn').onclick = addDrawToBig

function addDrawToBig(){
    var ao = d.getObjects();
    console.log(ao);
    for(var i in ao) {
      c.add(ao[i]);
    }
}

var circle = new fabric.Circle({
    stroke: 'red',
    radius: 15,
    left: 15,
    top: 15
})

d.add(circle)
d.renderAll()

addDrawToBig()

function addDrawToBig(){
  var group = [ ]
  d.getObjects().forEach(function(path){
    path.clone(function(copy){
      group.push(copy);
    });
  });
  group = new fabric.Group( group )
  c.add(group).centerObject(group).setActiveObject(group);
}