title: How to freedraw Circle in fabricjs using mouse?
body: <p>I am using Fabricjs in my project and now working on drawing circle using Fabricjs library.</p>
  
  <p>I am able to do it but it is not very proper on x-axis , as dragging on x-axis seems improper whereas dragging on y-axis works fine.</p>
  
  <p>Can anybody fix it to work on any axis.</p>
  
  <p>Also there are 2-3 questions on stackoverflow that are not properly answered regarding Circle out of which I asked 1 previously.</p>
  
  <p>Here's the Fiddle of the work I have done so far: 
  <a href="http://jsfiddle.net/8u1cqasa/10/" rel="nofollow">Draw Circle</a></p>
  
  <p>Code : 
  `</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.abs(origY - pointer.y)/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>