rectangle in fabrcijs

using mouse controls

by softvar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

<button id="selec" >Selection Mode</button>

JavaScript

var canvas = new fabric.Canvas('paper', { selection: false });
$("#selec").click(function(){
    canvas.isDrawingMode = false;
    canvas.selection= true;
    canvas.off('mouse:down');
    canvas.off('mouse:move');
    canvas.off('mouse:up');
    canvas.forEachObject(function(o){ o.setCoords() })
})
var rect, isDown, origX, origY;

canvas.observe('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  rect = new fabric.Rect({
    left: pointer.x,
    top: pointer.y,
    strokeWidth: 1,
    width:2,
    height:2,
    stroke: 'black',
    fill: 'white',
    selectable: true
    
  });
  canvas.add(rect);
});

canvas.observe('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
    rect.set({ width: Math.abs(origX - pointer.x),height: Math.abs(origY - pointer.y)});
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});