title: FabricJS layers
body: <p>Initially, an object (<code>fabric.Circle</code>) is added to my canvas.</p>
  
  <pre><code>var canvas = new fabric.Canvas('myCanvas');
  var circle = new fabric.Circle ({
      radius: 100,
      fill: 'white',
      stroke: 'black',
      originX: 'center',
      originY: 'center'
  });
  canvas.add(circle);
  </code></pre>
  
  <p>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.</p>
  
  <p>I don't want that. Is there any way to keep adding objects to the current layer without losing the FabricJS's functionalities?</p>
  
  <p>Edit: The button and its corresponding function are as follows:</p>
  
  <pre><code>&lt;button onclick="addArrowToCanvas()"&gt;Add Circle&lt;/button&gt;
  &lt;script&gt;
                  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);
                  }
              &lt;/script&gt;
  </code></pre>