如何为fabricjs中的所有方法使用和访问多个画布的实例？

Question

我为这个问题搜索了整整一个月，但我真的很难解决这个问题。以下是这个问题的类似答案，但没有一个适用于我的情况：

Fabric.js 中的多个画布（页面）

在多个fabric js画布的情况下如何管理内存？

当我开始向画布添加文本和形状时出现问题，这给了我一个错误：Uncaught TypeError: Cannot read property 'add' of undefined

错误从这里开始：

// add text on click
$('#add_text').on("click",function(event){
   var Text = new fabric.Textbox('Sample');
   canvasInstances[0].add(Text).renderAll();
});
// add circle on click
$('#add_circle').on("click",function(event){
   var Circle = new fabric.Circle();
   canvasInstances[0].add(Circle).renderAll();
});

这是我的 jsfiddle

请帮忙！！！

Answer 1

创建画布元素后创建织物画布实例，然后推送到您的 canvasInstances 数组。

演示

// store multiple instances in  the array
var canvasInstances = [];
// add canvas on click
$('.add_canvas').on("click", function(event) {
  var content = document.getElementById("content");
  var newcanvas = document.createElement("canvas");
  content.appendChild(newcanvas);
  var fabricCanvasObj = new fabric.Canvas(newcanvas);
  canvasInstances.push(fabricCanvasObj);
});
// add text on click
$('#add_text').on("click", function(event) {
  canvasInstances.forEach(function(canvas) {
    var Text = new fabric.Textbox('Sample');
    canvas.add(Text).renderAll();
  })
});
// add circle on click
$('#add_circle').on("click", function(event) {
  canvasInstances.forEach(function(canvas) {
    var Circle = new fabric.Circle({
      radius: 50,
      left: 10,
      top: 10
    });
    canvas.add(Circle).renderAll();
  })
});
// error starts when adding text and circle in console log.
// what i wanted is to use all methods and access all 
// instances in fabric to make all canvas editable

canvas{
    border: 1px solid green;
    margin: 5px;
    z-index: 1;
}
.canvas-container{
    margin: 5px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<button class='add_canvas'>Add Canvas</button>
<button id ='add_text'>Add Text</button>
<button id ='add_circle'>Add Circle</button>
<div id="content"></div>