Akshay Akshay - 1 year ago 122
Javascript Question

FabricJS layers

Initially, an object (

fabric.Circle
) is added to my canvas.

var canvas = new fabric.Canvas('myCanvas');
var circle = new fabric.Circle ({
radius: 100,
fill: 'white',
stroke: 'black',
originX: 'center',
originY: 'center'
});
canvas.add(circle);


Now if I use a button to add another object to my canvas, the previous one disappears. I reckon it adds the new object on top of the previous layer.

I don't want that. Is there any way to keep adding objects to the current layer without losing the FabricJS's functionalities?

Edit: The button and its corresponding function are as follows:

<button onclick="addArrowToCanvas()">Add Circle</button>
<script>
function addArrowToCanvas(){
var canvas = new fabric.Canvas('myCanvas');
var circle = new fabric.Circle ({
radius: 100,
fill: 'white',
stroke: 'black',
originX: 'center',
originY: 'center'
});
canvas.add(circle);
}
</script>

Answer Source

Yes, that indeed adds the other object on top of the previous one, as you didn't specify the position for the object when creating it.

You need to set deterrent positions (top, left) for each individual object as per your need, so that they don't overlap each other.

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('myCanvas');
var circle = new fabric.Circle({
   top: 50,  //<-- set this
   left: 50,  //<-- set this
   radius: 30,
   fill: 'white',
   stroke: 'black',
   originX: 'center',
   originY: 'center'
});
canvas.add(circle);

function addRect() {
   var rect = new fabric.Rect({
      top: 120,  //<-- set this
      left: 120,  //<-- set this
      width: 60,
      height: 60,
      fill: 'white',
      stroke: 'black',
      originX: 'center',
      originY: 'center'
   })
   canvas.add(rect);
}
body{margin:10px 0 0 0;overflow:hidden}canvas {border: 1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="myCanvas" width="180" height="180"></canvas>
<button onclick="addRect()">Add Rectangle</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download