fabric.js free drawing after shape error

Question

I have a problem with fabric.js. I can draw a square in the canvas, but if I then switch to free drawing the line starts in the middle of the shape.

have a look here:

jsfiddle

var functouse = "pencil";
var pensize = 5;
var pencolour = "#000000";
var fillcolour = "#ffffff";
var canvas = new fabric.Canvas('sketchpad', {
  isDrawingMode: true
});
fabric.Object.prototype.transparentCorners = false;
canvas.selection = false;
canvas.observe('mouse:down', function(e) {
  mousedown(e);
});
canvas.observe('mouse:move', function(e) {
  mousemove(e);
});
canvas.observe('mouse:up', function(e) {
  mouseup(e);
});
canvas.observe('object:selected ', function(e) {
  console.log('selected something');
});
//fabric.Object.prototype.transparentCorners = false;
var line;
var isDown;
var initX = 0;
var initY = 0;
$(".top_butt").click(function() {
  functouse = $(this).attr('data-id');
});

function mousedown(o) {
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  if (functouse == "pencil") {
    canvas.isDrawingMode = true;
    canvas.freeDrawingColor = pencolour;
    canvas.freeDrawingLineWidth = pensize;
    canvas.freeDrawingMode = 'Pencil';
  } else if (functouse == "square") {
    initX = pointer.x;
    initY = pointer.y;
    canvas.isDrawingMode = false;
    var square = new fabric.Rect({
      width: 0.1,
      height: 0.1,
      left: initX,
      top: initY,
      fill: fillcolour,
      stroke: pencolour,
      strokeWidth: pensize,
      selectable: false,
      hasBorders: false,
      hasControls: false
    });
    canvas.add(square);
    canvas.setActiveObject(square);
  }
}

function mousemove(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  if (functouse == "square") {
    var ww = Math.abs(pointer.x - initX);
    var hh = Math.abs(pointer.y - initY);
    if (!ww || !hh) {
      return false;
    }
    var square = canvas.getActiveObject();
    square.set('width', ww).set('height', hh);
    canvas.renderAll();
  } else if (functouse == "pencil") {
    if (initX == -1 || initY == -1) {
      initX = pointer.x;
      initY = pointer.y;
    }
  }
}

function mouseup(o) {
  isDown = false;
  if (functouse == "square") {
    initX = -1;
    initY = -1;
    var square = canvas.getActiveObject();
    square.setCoords();
    //canvas.add(square);
    canvas.renderAll();
    //canvas.pointer
    $('canvas').css('cursor', 'nw-resize');
  } else if (functouse == "pencil") {
    canvas.forEachObject(function(o) {
      o.selectable = false,
        o.lockMovementX = true,
        o.lockMovementY = true,
        o.lockScaling = true
    });
  }
}

p span{
  cursor: pointer;
}
canvas{
  border: solid thin #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<p><span class="top_butt" data-id='square'>Square</span> | <span  class="top_butt" data-id='pencil'>Pencil</span></p>
<canvas id="sketchpad" width="400" height="600"></canvas>
<p>
Uno y dos
</p>

draw a square, then a line and you will see what I mean.

extra point for: I don't understand why it starts drawing with a very thin line and only when the line is finished it adopts the line size I set.

and on a third bonus point: is it possible to draw the squares from the top left corners, instead of the center.

Answer 1

You need to remove the event handler using off() , and I have updated your fabric version . Have a look.

DEMO

var functouse = "pencil";
var pensize = 5;
var pencolour = "#000000";
var fillcolour = "#ffffff";
var canvas = new fabric.Canvas('sketchpad', {
  isDrawingMode: true
});
fabric.Object.prototype.transparentCorners = false;
canvas.selection = false;

canvas.on('object:selected ', function(e) {
  console.log('selected something');
});
//fabric.Object.prototype.transparentCorners = false;
var line;
var isDown;
var square;
var initX = 0;
var initY = 0;
$(".top_butt").click(function() {
  functouse = $(this).attr('data-id');
  removeEvents();
  if (functouse == "pencil") {
    setObjectSelectable(false);
    canvas.isDrawingMode = true;
    canvas.freeDrawingColor = pencolour;
    canvas.freeDrawingLineWidth = pensize;
    canvas.freeDrawingMode = 'Pencil';
  } else if (functouse == "square") {
    canvas.isDrawingMode = false;
    setObjectSelectable(false);
    addEvent();

  } else {
    canvas.isDrawingMode = false;
    setObjectSelectable(true);
  }
});

function setObjectSelectable(val) {
  canvas.forEachObject(function(obj) {
    obj.selectable = val;
  })
  canvas.renderAll();
}

function removeEvents() {
  canvas.off('mouse:down');
  canvas.off('mouse:move');
  canvas.off('mouse:up');
}

function addEvent() {
  canvas.on('mouse:down', mousedown);
  canvas.on('mouse:move', mousemove);
  canvas.on('mouse:up', mouseup);
}

function mousedown(o) {
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  initX = pointer.x;
  initY = pointer.y;
  canvas.isDrawingMode = false;
  square = new fabric.Rect({
    width: 0.1,
    height: 0.1,
    left: initX,
    top: initY,
    fill: fillcolour,
    stroke: pencolour,
    strokeWidth: pensize,
    selectable: false,
    hasBorders: false,
    hasControls: false
  });
  canvas.add(square);
  canvas.setActiveObject(square);
}

function mousemove(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  var ww = Math.abs(pointer.x - initX);
  var hh = Math.abs(pointer.y - initY);
  if (!ww || !hh) {
    return false;
  }
  square.set('width', ww).set('height', hh);
  canvas.renderAll();
}

function mouseup(o) {
  isDown = false;
  initX = -1;
  initY = -1;
  square.setCoords();
  square = null;
  //canvas.add(square);
  canvas.renderAll();
}

p span{
  cursor: pointer;
}
canvas{
  border: solid thin #ccc;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span class="top_butt" data-id='square'>Square</span> | <span  class="top_butt" data-id='pencil'>Pencil</span>| <span  class="top_butt" data-id='selection'>Selection</span></p>
<canvas id="sketchpad" width="400" height="600"></canvas>
<p>
Uno y dos
</p>