title: How to free draw ellipse using Fabricjs?
body: <p>Here's the code for how to draw circle using Fabricjs : <a href="http://jsfiddle.net/Subhasish2015/8u1cqasa/32/" rel="nofollow">Draw Circle using Mouse</a>.</p>
  
  <p>I want to achieve the same for ellipse . Because drawing circle freely will depend on radius but I want to draw a egg shaped or oval shaped area then , radius is not helping me , hence I am looking to use Ellipse here.</p>
  
  <p>Code for free drawing circle :
  `</p>
  
  <pre><code>var canvas = new fabric.Canvas("canvas2");
  var circle, isDown, origX, origY;
  
  canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  circle = new fabric.Circle({ 
      left: origX,
      top: origY,
      originX: 'left',
      originY: 'top',
      radius: pointer.x-origX,
      angle: 0,
      fill: '',
      stroke:'red',
      strokeWidth:3,
  });
  canvas.add(circle);
  });
  
  canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  var radius = Math.max(Math.abs(origY - pointer.y),Math.abs(origX - pointer.x))/2;
  if (radius &gt; circle.strokeWidth) {
      radius -= circle.strokeWidth/2;
  }
  circle.set({ radius: radius});
  
  if(origX&gt;pointer.x){
      circle.set({originX: 'right' });
  } else {
      circle.set({originX: 'left' });
  }
  if(origY&gt;pointer.y){
      circle.set({originY: 'bottom'  });
  } else {
      circle.set({originY: 'top'  });
  }
  canvas.renderAll();
  });
  
  canvas.on('mouse:up', function(o){
    isDown = false;
  });
  </code></pre>
  
  <p>`</p>
  
  <p>Can anyone do it?</p>