Circle drawing in fabricjs

Circle drawing in fabricjs

HTML

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

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

JavaScript

var canvas = new fabric.Canvas('c', { 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 circle, isDown, origX, origY;

canvas.observe('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  circle = new fabric.Circle({
    left: pointer.x,
    top: pointer.y,
    radius: 1,
    strokeWidth: 1,
    stroke: 'black',
    fill: 'white',
    selectable: true,
    originX: 'center', originY: 'center'
  });
  canvas.add(circle);
});

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

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