How to Draw multiple circle at CANVAS with mouse event

I just in problem when draw multiple circle in canvas. When I draw single circle just sucessfully, but for next circle first circle is gone. Actually only one circle is exist. So, please give me something in my code for multiple circle,

this my code

html
<canvas id="canvas" width="800" height="500"></canvas>


JS
//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;

//Mousedown
$(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX-canvasx);
    last_mousey = parseInt(e.clientY-canvasy);
    mousedown = true;
});

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

//Mousemove
$(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    if(mousedown) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //Save
        ctx.save();
        ctx.beginPath();
        //Dynamic scaling
        var scalex = 1*((mousex-last_mousex)/2);
        var scaley = 1*((mousey-last_mousey)/2);
        ctx.scale(scalex,scaley);
        //Create ellipse
        var centerx = (last_mousex/scalex)+1;
        var centery = (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();
    }
});`