title: Drawing circle/ellipse on HTML5 canvas using mouse events
body: <p>I want something like ellipse option in paint for drawing on my canvas. I have achieved this partially. The problem is I am not able to get radius of circle; currently I have hard coded it to 15. Also I want to draw an ellipse (like in paint) not exact circle.</p>
  <p>This is my code for drawing circle on canvas using mouse events. Please help me with code to achieve my above mentioned requirements.</p>
  <pre class="lang-js prettyprint-override"><code>function tool_circle() {
      var tool = this;
      this.started = false;
  
      this.mousedown = function (ev) {
          tool.started = true;
          tool.x0 = ev._x;
          tool.y0 = ev._y;
      };
  
      this.mousemove = function (ev) {
          if (!tool.started) {
              return;
          }
  
          context.fillStyle = 'red';
  
          var distance = Math.sqrt(Math.pow(tool.x0 - ev._x, 2) + Math.pow(tool.y0 - ev._y));
          context.beginPath();
      
          context.arc(tool.x0, tool.y0,15, 0, Math.PI * 2, false);
          context.stroke();
          context.fill();
      };
  
      this.mouseup = function (ev) {
          if (tool.started) {
              tool.mousemove(ev);
              tool.started = false;
              img_update();
          }
      };
  }
  </code></pre>