キャンバスの描画を再開する方法は？

Question

開始をクリックすると、丸が丸く表示されます。しかし、をクリックしてをクリックして再び開始すると、以前は円の残りの部分と直線が現れます。

DEMO：https://fiddle.jshell.net/1xhkfk73/

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var draw = 0; 
 
var stepDraw = 0; 
 
ctx.strokeStyle = "#FF0000"; 
 
ctx.translate(0.5, 0.5); 
 
var delay = 30; 
 
var drawing = 0; 
 

 
function drawCircle(steps) { 
 
    draw = ((2 * Math.PI)/steps); 
 
    stepDraw = draw; 
 

 
    drawing = setInterval(function() { 
 

 
    ctx.arc(400, 200, 120, draw, draw, false); 
 
    ctx.stroke(); 
 
    draw += stepDraw; 
 
    }, delay) 
 
} 
 

 

 
$("#click").click(function() { 
 
    drawCircle(120); 
 
}); 
 

 
$("#clean").click(function() { 
 
    clearInterval(drawing); 
 
    ctx.clearRect(0, 0, 800, 400); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="click">start</span> 
 
<span id="clean">clean</span> 
 
<canvas id="myCanvas" class="center-block" width="800" height="400"> 
 
    Canvas not supported! 
 
</canvas>

Answer 1

はこれを試してみてください。

パスを閉鎖する必要があります。

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var draw = 0; 
 
var stepDraw = 0; 
 
ctx.strokeStyle = "#FF0000"; 
 
ctx.translate(0.5, 0.5); 
 
var delay = 30; 
 
var drawing = 0; 
 

 
function drawCircle(steps) { 
 
    draw = ((2 * Math.PI)/steps); 
 
    stepDraw = draw; 
 
    drawing = setInterval(function() { 
 
    ctx.beginPath(); 
 
    ctx.arc(400, 200, 120, draw, draw+stepDraw, false); 
 
    ctx.stroke(); 
 
    draw += stepDraw; 
 
    }, delay) 
 
} 
 

 

 
$("#click").click(function() { 
 
    drawCircle(120); 
 
}); 
 

 
$("#clean").click(function() { 
 
    clearInterval(drawing); 
 
    ctx.clearRect(0, 0, 800, 400); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="click">start</span> 
 
<span id="clean">clean</span> 
 
<canvas id="myCanvas" class="center-block" width="800" height="400"> 
 
    Canvas not supported! 
 
</canvas>