Drawing circle/ellipse on HTML5 canvas using mouse events

[skavinkar]

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 ellipse(same as paint) not exact circle. This is my code for drawing circle on canvas using mouse events.Please help me with code to achieve my 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();
            }
        };
    }