CODEWITHSUNDEEP
javascriptjqueryfabricjsjsfiddle
rhemiel
rhemiel

Reputation: 23

How to use and access instances of multiple canvases for all methods in fabricjs?

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!!!

Upvotes: 2

Views: 4784

Answers (1)

Durga
Durga

Reputation: 15604

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.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>

Upvotes: 7

Related Questions