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