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(oe); 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(oe); 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(oe); 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(oe); 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>