Ellipse drawing in fabricjs

using mouse controls

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 ellip, isDown, origX, origY;

var lineX = new fabric.Line([0, 200, 400, 200], {
	storkeWidth: 1,
  stroke: 'black',
  selectable: false
});
var lineY = new fabric.Line([200, 0, 200, 400], {
	storkeWidth: 1,
  stroke: 'black',
  selectable: false
});

canvas.add(lineX);
canvas.add(lineY);

var elip = new fabric.Ellipse({
    left: 200,
    top: 200,
    strokeWidth: 1,
    stroke: 'black',
    fill: '',
    selectable: true,
    originX: 'center', originY: 'center',
     rx: 20,
    ry: 20
  });
canvas.add(elip);

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

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

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