HTML5 Canvasからラインがクリアされない

Question

HTML5 Canvasアニメーションで発生している奇妙なアーティファクトを解決しようとしています。私はお互いに続く行でテキストを囲むようにしています。 3行目をクリアすると、あたかもclearRect()が正しく動作しないような行が残っています。
私はすでにGoogleで検索しており、実際に描画機能にはそれぞれbeginPath()とclosePath()が使用されているため、このことが解消されないと私の不満は想像することができます。

私はこのアニメーションでどこが間違っているかを誰かに教えてもらえると嬉しいです。 （スタックオーバーフローが、私はJSFiddleにリンクしている場合、ここにコードを置くために私を強制されているため）ここで

はドローコードの例です

function drawArc(xPos, yPos, 
    radius, 
    startAngle, endAngle, 
    anticlockwise, 
    lineColor, fillColor) { 
    var startAngle = startAngle * (Math.PI/180); 
    var endAngle = endAngle * (Math.PI/180); 

    var radius = radius; 

    context.strokeStyle = lineColor; 
    context.fillStyle = fillColor; 
    context.lineWidth = 1; 

    context.beginPath(); 
    context.arc(xPos, yPos, 
    radius, 
    startAngle, endAngle, 
    anticlockwise); 
    context.fill(); 
    context.closePath(); 
} 

function drawLine(xStartPos, yStartPos, xEndPos, yEndPos, width, color) { 
    context.stokeStyle = color; 
    context.lineWidth = width; 

    context.beginPath(); 
    context.moveTo(xStartPos, yStartPos); 
    context.lineTo(xEndPos, yEndPos); 
    context.stroke(); 
    context.closePath(); 
} 

JSFiddle：https://jsfiddle.net/xtkbnxx5/9/

このバージョンでは、それは次のようになりますアニメーションが間違った場所で停止しています。しかし、javascriptの126行目をコメントアウトしてもう一度実行すると、その行がそこにあり、決してクリアされないことがわかります...

ご協力いただければ幸いです。

Answer 1

あなたのcontext.clearRect（...）ステートメントがキャンバス全体を消去していません。私は

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

にあなたのclearRectのステートメントを変更する場合

そして、2行目は、最終的に消えます。

https://jsfiddle.net/xtkbnxx5/10/