fabric js free drawing rectangle results in duplicate

Question

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:

$('#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;
}

just to clarify a bit more

Answer 1

canvas.freeDrawingBrush.color = 'transparent';
canvas.isDrawingMode = true;

canvas.isDrawingMode = true; here drawing mode is on and the color is transparent , so it is not visible and creating another bounding box according to your mouse move(Pencil path object).

var canvas = new fabric.Canvas('c'),isMouseDown,tool;
$('#square').click(function () {
  tool = 'square';
  canvas.selection = false;
  changeStatus(false);
  //register mouse event
  // canvas.isDrawingMode = true;
  //canvas.freeDrawingBrush.color = 'transparent';
  //canvas.isDrawingMode = false;
  canvas.on('mouse:down', onMouseDown);
  canvas.on('mouse:move', onMouseMove);
  canvas.on('mouse:up', onMouseUp);
});
$("#select").click(function()
{
  tool = 'select';
  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.1,
            height: 0.1,
            stroke: 'red',
            strokeWidth: 3,
            selectable: false,
            fill: ''
        });
        canvas.add(rect);
    }
}

function changeStatus(val){
  canvas.forEachObject(function (obj){
   obj.selectable = val;
  })
  canvas.renderAll();
 }
function onMouseMove(o) {
  if (!isMouseDown) {
      return;
  }
  var pointer = canvas.getPointer(o.e);
  if (tool == 'square') {
      rect.set({
          width: (Math.abs((pointer.x - rect.left))),
          height: (Math.abs((pointer.y - rect.top)))
      });
      canvas.renderAll();
  }
}
function onMouseUp(o) {
  if (tool == 'square') {
      rect.setCoords();
      console.log(rect);
  }
  isMouseDown = false;
}

<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/1.6.7/fabric.js"></script>
<button id='square'>square</button>
<button id='select'>select</button>
<canvas id='c' width=400 height=400></canvas>