I search for whole month for this problem but it is really difficult for me to solve this issue.Here are the similar answers for this problem but none of them are applicable to my situation:

Multiple canvases (pages) in Fabric.js

How to manage memory in case of multiple fabric js canvas?

The problem arises when i start to add text and shapes to canvas which gave me an error: Uncaught TypeError: Cannot read property 'add' of undefined

Error Starts here:

// 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();
});

Here is my jsfiddle

Please Help!!!

I search for whole month for this problem but it is really difficult for me to solve this issue.Here are the similar answers for this problem but none of them are applicable to my situation:

Multiple canvases (pages) in Fabric.js

How to manage memory in case of multiple fabric js canvas?

The problem arises when i start to add text and shapes to canvas which gave me an error: Uncaught TypeError: Cannot read property 'add' of undefined

Error Starts here:

// 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();
});

Here is my jsfiddle

Please Help!!!

• javascript
• jquery
• fabricjs
• jsfiddle

• Please read How to create a Minimal, Complete, and Verifiable example – Alex Ironside Commented Jul 23, 2018 at 11:34

1 Answer 1

Create fabric canvas instance after you creating canvas element, then push to your canvasInstances array.

DEMO

// 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>