Fabric.js - Free draw a rectangle

Question

I have the following which doesn't work correctly:

var canvas = new fabric.Canvas('canvas');   canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); });   var started = false;   var x = 0; var y = 0;   /* Mousedown */ function mousedown(e) {      var mouse = canvas.getPointer(e.memo.e);      started = true;      x = mouse.x;     y = mouse.y;          var square = new fabric.Rect({           width: 1,          height: 1,          left: mouse.x,          top: mouse.y,          fill: '#000'      });       canvas.add(square);      canvas.renderAll();     canvas.setActiveObject(square);   }   /* Mousemove */ function mousemove(e) {      if(!started) {          return false;      }      var mouse = canvas.getPointer(e.memo.e);      var x = Math.min(mouse.x,  x),     y = Math.min(mouse.y,  y),     w = Math.abs(mouse.x - x),     h = Math.abs(mouse.y - y);      if (!w || !h) {          return false;      }      var square = canvas.getActiveObject();       square.set('top', y).set('left', x).set('width', w).set('height', h);      canvas.renderAll();   }   /* Mouseup */ function mouseup(e) {      if(started) {          started = false;          }      } 

The above logic is from a simple rectangle drawing system I used without fabric.js so I know it works, just not with fabric.js.

It seems the maths is off or I'm setting the incorrect params with the width/height/x/y values, as when you draw the rectangle does not follow the cursor correctly.

Any help is much appreciated, thanks in advance :)

Answer 1

I have written an example for you. Please follow the link below:

http://jsfiddle.net/a7mad24/aPLq5/

var canvas = new fabric.Canvas('canvas', { selection: false });  var rect, isDown, origX, origY;  canvas.on('mouse:down', function(o){     isDown = true;     var pointer = canvas.getPointer(o.e);     origX = pointer.x;     origY = pointer.y;     var pointer = canvas.getPointer(o.e);     rect = new fabric.Rect({         left: origX,         top: origY,         originX: 'left',         originY: 'top',         width: pointer.x-origX,         height: pointer.y-origY,         angle: 0,         fill: 'rgba(255,0,0,0.5)',         transparentCorners: false     });     canvas.add(rect); });  canvas.on('mouse:move', function(o){     if (!isDown) return;     var pointer = canvas.getPointer(o.e);      if(origX>pointer.x){         rect.set({ left: Math.abs(pointer.x) });     }     if(origY>pointer.y){         rect.set({ top: Math.abs(pointer.y) });     }      rect.set({ width: Math.abs(origX - pointer.x) });     rect.set({ height: Math.abs(origY - pointer.y) });       canvas.renderAll(); });  canvas.on('mouse:up', function(o){   isDown = false; }); 

Answer 2

Looks like Fabric.js calculates everything from the origin. So, 'Top' and 'Left' are a bit misleading. Check the following link: Canvas Coordinates Have Offset. Also, I've changed a bit of your code:

var canvas = new fabric.Canvas('canvas'); canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); });  var started = false; var x = 0; var y = 0;  /* Mousedown */ function mousedown(e) {     var mouse = canvas.getPointer(e.memo.e);     started = true;     x = mouse.x;     y = mouse.y;      var square = new fabric.Rect({          width: 0,          height: 0,          left: x,          top: y,          fill: '#000'     });      canvas.add(square);      canvas.renderAll();     canvas.setActiveObject(square);   }   /* Mousemove */ function mousemove(e) {     if(!started) {         return false;     }      var mouse = canvas.getPointer(e.memo.e);      var w = Math.abs(mouse.x - x),     h = Math.abs(mouse.y - y);      if (!w || !h) {         return false;     }      var square = canvas.getActiveObject();      square.set('width', w).set('height', h);     canvas.renderAll();  }  /* Mouseup */ function mouseup(e) {     if(started) {         started = false;     }      var square = canvas.getActiveObject();      canvas.add(square);      canvas.renderAll();  }