Shapes not rendering more than once in Fabricjs canvas?

Question

I'm trying to make a button that adds shapes onto my FabricJS canvas but the shapes only appear once... ish. Every time I click on the button below, the rectangle's border gets thicker which I assume, means they're being added but whenever I go to drag the rectangle, it displays as only one.

How can I make the button add multiple rectangles to the canvas? (not all at once, after every click add 1)

My current code:

HTML:

<button onclick="addRectangle"></button>

JavaScript:

var rec = new fabric.Rect({
    top: 10,
    left: 10,
    width: 66,
    height: 35,
    fill: 'silver',
    stroke: 'black',
    strokeWidth: 1
});

function addRectangle() {
  c.add(rec);
  c.renderAll();
}

Answer 1

You're adding the same instance of fabric.Rect to the canvas, multiple times.

When you call addRectangle() twice, two references to the same object end up in the internal _objects array - there's no safeguard to prevent that. During renderAll() , fabric.js iterates over the contents of this array and renders each element in it. That's why this Rect is being rendered twice.

What you want to do is create a new Rect instance on each addRectangle() call:

function createRect() {
  return new fabric.Rect({
    top: 10,
    left: 10,
    width: 66,
    height: 35,
    fill: "silver",
    stroke: "black",
    strokeWidth: 1
  });
}

function addRectangle() {
  var rect = createRect();
  c.add(rect);
  c.renderAll();
}