title: fabric js free drawing rectangle results in duplicate
body: <p>hey guys so im creating a whiteboard app using fabric js but im facing this problem whenever the user draws a rectangle and selects to drag it, it actually drags another invisible rectangle and not the original rectangle which is super weird after i drag the duplicate invisible rectangle i then can freely drag the visible one.. which sucks. i actually made sure that this was the problem as after i drew the rectangle i did canvas.remove(rect) and it did remove the rectangle however the invisible rectangle stayed there.. here is the code:</p>
  
  <pre><code>$('#square').click(function () {
      tool = 'square';
      canvas.selection = false;
      changeStatus(false);
      //register mouse event
      // canvas.isDrawingMode = true;
      canvas.freeDrawingBrush.color = 'transparent';
      canvas.isDrawingMode = true;
      canvas.on('mouse:down', onMouseDown);
      canvas.on('mouse:move', onMouseMove);
      canvas.on('mouse:up', onMouseUp);
  });
  $("#eraser").click(function()
  {
      tool = 'eraser';
      canvas.selection = true;
      canvas.isDrawingMode = false;
      changeStatus(true);
      //remove mouse event
      canvas.off('mouse:down', onMouseDown);
      canvas.off('mouse:move', onMouseMove);
      canvas.off('mouse:up', onMouseUp);
  }); 
  function onMouseDown(o) {
        console.warn('clicked');
        isMouseDown = true;
        var pointer = canvas.getPointer(o.e);
        if (tool == 'square') {
            rect = new fabric.Rect({
                left: pointer.x,
                top: pointer.y,
                width: 0,
                height: 0,
                stroke: 'red',
                strokeWidth: 3,
                selectable: false,
                fill: ''
            });
            canvas.add(rect);
        }
    }
  function onMouseMove(o) {
      if (!isMouseDown) {
          return;
      }
      var pointer = canvas.getPointer(o.e);
      if (tool == 'square') {
          rect.set({
              width: (Math.abs((pointer.x - rect.get('left')))),
              height: (Math.abs((pointer.y - rect.get('top'))))
          });
          canvas.renderAll();
      }
  }
  function onMouseUp(o) {
      if (tool == 'square') {
          rect.setCoords();
          console.log(rect);
      }
      isMouseDown = false;
  }
  </code></pre>
  
  <p>just to clarify a bit more<a href="https://i.stack.imgur.com/srhDZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/srhDZ.png" alt="the duplicate"></a></p>