javascript - Drawing circle/ellipse on HTML5 canvas using mouse events -

i want ellipse option in paint drawing on canvas. have achieved partially. problem not able radius of circle, have hard coded 15. want draw ellipse(same paint) not exact circle. code drawing circle on canvas using mouse events.please me code achieve above mentioned requirements.

 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();             }         };     } 

i similar marke's answer however, using bezier curve draw ellipses won't give exact radius need.

for function draw manual ellipse needed, , it's rather simple -

this function take corner start point , and end point , draw ellipse exactly within boundary:

live demo

function drawellipse(x1, y1, x2, y2) {      var radiusx = (x2 - x1) * 0.5,   /// radius x based on input         radiusy = (y2 - y1) * 0.5,   /// radius y based on input         centerx = x1 + radiusx,      /// calc center         centery = y1 + radiusy,         step = 0.01,                 /// resolution of ellipse         = step,                    /// counter         pi2 = math.pi * 2 - step;    /// end angle      /// start new path     ctx.beginpath();      /// set start point @ angle 0     ctx.moveto(centerx + radiusx * math.cos(0),                centery + radiusy * math.sin(0));      /// create ellipse         for(; < pi2; += step) {         ctx.lineto(centerx + radiusx * math.cos(a),                    centery + radiusy * math.sin(a));     }      /// close , stroke demo     ctx.closepath();     ctx.strokestyle = '#000';     ctx.stroke(); } 

the demo marks rectangle area show ellipse within it.

draw

to handle mouse operation let draw ellipse can do:

var canvas = document.getelementbyid('mycanvas'),     ctx = canvas.getcontext('2d'),     w = canvas.width,     h = canvas.height,     x1,                 /// start points     y1,     isdown = false;     /// if mouse button down  /// handle mouse down     canvas.onmousedown = function(e) {      /// corrected mouse position , store first point     var rect = canvas.getboundingclientrect();     x1 = e.clientx - rect.left;     y1 = e.clienty - rect.top;     isdown = true; }  /// clear isdown flag stop drawing canvas.onmouseup = function() {     isdown = false; }  /// draw ellipse start point canvas.onmousemove = function(e) {      if (!isdown) return;      var rect = canvas.getboundingclientrect(),         x2 = e.clientx - rect.left,         y2 = e.clienty - rect.top;      /// clear canvas     ctx.clearrect(0, 0, w, h);      /// draw ellipse     drawellipse(x1, y1, x2, y2); } 

a tip can create top canvas on top of main canvas , drawing there. when mouse button released transfer drawing main canvas. way don't have redraw when drawing new shape.

hope helps!