Drawing circle/ellipse on HTML5 canvas using mouse events

Question

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 hav

Answer 1

Here's my way of drawing an ellipse onto a canvas with mouse drag.

It uses radius of 1, but dynamic scaling to get the ellipse effect :)

https://jsfiddle.net/richardcwc/wdf9cocz/

//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var scribble_canvasx = $(canvas).offset().left;
var scribble_canvasy = $(canvas).offset().top;
var scribble_last_mousex = scribble_last_mousey = 0;
var scribble_mousex = scribble_mousey = 0;
var scribble_mousedown = false;

//Mousedown
$(canvas).on('mousedown', function(e) {
    scribble_last_mousex = parseInt(e.clientX-scribble_canvasx);
	scribble_last_mousey = parseInt(e.clientY-scribble_canvasy);
    scribble_mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
    scribble_mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
    scribble_mousex = parseInt(e.clientX-scribble_canvasx);
	scribble_mousey = parseInt(e.clientY-scribble_canvasy);
    if(scribble_mousedown) {
        ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
        //Save
        ctx.save();
        ctx.beginPath();
        //Dynamic scaling
        var scalex = 1*((scribble_mousex-scribble_last_mousex)/2);
        var scaley = 1*((scribble_mousey-scribble_last_mousey)/2);
        ctx.scale(scalex,scaley);
        //Create ellipse
        var centerx = (scribble_last_mousex/scalex)+1;
        var centery = (scribble_last_mousey/scaley)+1;
        ctx.arc(centerx, centery, 1, 0, 2*Math.PI);
        //Restore and draw
        ctx.restore();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 5;
        ctx.stroke();
    }
    //Output
    $('#output').html('current: '+scribble_mousex+', '+scribble_mousey+'
last: '+scribble_last_mousex+', '+scribble_last_mousey+'
mousedown: '+scribble_mousedown);
});

canvas {
    cursor: crosshair;
    border: 1px solid #000000;
}