绘制多个可拖动圆圈HTML5画布

Question

I have to draw mutiple draggable circles on an HTML5 canvas, and also I should move the circles after creating it. But while dragging to draw there are multiple frames created. How can I remove it without reloading the page?

Here is a demo of my code:

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var canvasOffset = $("#canvas").offset(); var offsetX = canvasOffset.left; var offsetY = canvasOffset.top; var startX; var startY; var isDown = false; function handleMouseDown(e) { e.preventDefault(); // e.stopPropagation(); startX = parseInt(e.clientX - offsetX); startY = parseInt(e.clientY - offsetY); isDown = true; } function handleMouseUp(e) { if (!isDown) { return; } e.preventDefault(); // e.stopPropagation(); isDown = false; } function handleMouseOut(e) { if (!isDown) { return; } e.preventDefault(); //e.stopPropagation(); isDown = false; } function handleMouseMove(e) { if (!isDown) { return; } e.preventDefault(); //e.stopPropagation(); mouseX = parseInt(e.clientX - offsetX); mouseY = parseInt(e.clientY - offsetY); if (isDown) { var dx = Math.abs(startX - mouseX); var dy = Math.abs(startY - mouseY); var midX = (startX + mouseX) / 2; var midY = (startY + mouseY) / 2; var r = Math.sqrt(dx * dx + dy * dy) / 2; alert(midX, midY); draw(midX, midY, r); } } function draw(midX, midY, r) { // ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(midX, midY, r, 0, 2 * Math.PI, false); //ctx.restore(); //ctx.stroke(); ctx.fillStyle = getRandomColor(); ctx.fill(); } function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $("#canvas").mousedown(function(e) { handleMouseDown(e); }); $("#canvas").mousemove(function(e) { handleMouseMove(e); }); $("#canvas").mouseup(function(e) { handleMouseUp(e); }); $("#canvas").mouseout(function(e) { handleMouseOut(e); }); 

  #canvas { border: 1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4>Drag to draw circles</h4> <canvas id="canvas" width=600 height=400></canvas> <button onclick="location.reload()">Reset</button> 

Answer 1

You can clear the canvas without reloading the page by using ctx.clearRect() like so:

ctx.clearRect(0, 0, canvas.width, canvas.height);

Working Live Demo:

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var canvasOffset = $("#canvas").offset(); var offsetX = canvasOffset.left; var offsetY = canvasOffset.top; var startX; var startY; var isDown = false; function handleMouseDown(e) { e.preventDefault(); // e.stopPropagation(); startX = parseInt(e.clientX - offsetX); startY = parseInt(e.clientY - offsetY); isDown = true; } function handleMouseUp(e) { if (!isDown) { return; } e.preventDefault(); // e.stopPropagation(); isDown = false; } function handleMouseOut(e) { if (!isDown) { return; } e.preventDefault(); //e.stopPropagation(); isDown = false; } function handleMouseMove(e) { if (!isDown) { return; } e.preventDefault(); //e.stopPropagation(); mouseX = parseInt(e.clientX - offsetX); mouseY = parseInt(e.clientY - offsetY); if(isDown) { var dx = Math.abs(startX - mouseX); var dy = Math.abs(startY - mouseY); var midX = (startX + mouseX) / 2; var midY = (startY + mouseY) / 2; var r = Math.sqrt(dx * dx + dy * dy) / 2; //alert(midX,midY); draw(midX,midY,r); } } function draw(midX,midY,r) { // ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(midX, midY, r, 0, 2 * Math.PI, false); //ctx.restore(); //ctx.stroke(); ctx.fillStyle = getRandomColor(); ctx.fill(); } function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $("#canvas").mousedown(function (e) { handleMouseDown(e); }); $("#canvas").mousemove(function (e) { handleMouseMove(e); }); $("#canvas").mouseup(function (e) { handleMouseUp(e); }); $("#canvas").mouseout(function (e) { handleMouseOut(e); }); document.getElementById("clear").onclick = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); }; 

 #canvas { border:1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4>Drag to draw circles</h4> <canvas id="canvas" width=600 height=400></canvas> <button id="clear">Reset</button> 

JSFiddle Version: https://jsfiddle.net/j9y7fqyx/