図面を元に戻す方法は？ストップウォッチを作成し、それは私が働いているストップウォッチを作ってるんだが、それが変化したときに、それは繰り返しテキストを描画しているため、テキスト自体が重なっ

Question

を更新してテキストが重なっています。私が間隔からstrokeTextとfillTextを削除すると、変更されません。それは同じままです。どのように私は、その機能を元に戻す、または間隔の最初にテキストを削除することができますか？

function drawTimer() { 
    var fontSize = 15; 
    graph.lineWidth = playerConfig.textBorderSize; 
    graph.fillStyle = playerConfig.textColor; 
    graph.strokeStyle = playerConfig.textBorder; 
    graph.miterLimit = 1; 
    graph.lineJoin = 'round'; 
    graph.textAlign = 'right'; 
    graph.textBaseline = 'middle'; 
    graph.font = 'bold ' + fontSize + 'px sans-serif'; 

    var gameTimeMinutes = 0; 
    var gameTimeSeconds = 1; 
    var gameTime = ""; 

    function addTime() { 
     gameTimeSeconds += 1; 

     if (gameTimeSeconds < 10) { 
      gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds; 
     } else { 
      gameTime = gameTimeMinutes + " : " + gameTimeSeconds; 
     } 

     if (gameTimeSeconds == 60) { 
      gameTimeSeconds = 0; 
      gameTimeMinutes++; 
     } 

     graph.strokeText(gameTime, 50, 50); 
     graph.fillText(gameTime, 50, 50); 
    } 

setInterval(addTime, 1000); 
} 

コードの説明：gameTimeSecondsはコロンの右側秒で、分は左側にあり、その秒は二桁でない場合は、それの左側にゼロを示して言います。また、秒が60に達すると1分を追加して時間を書きます。例：0:01、0:20、1:20など。ありがとう！

Answer 1

私はあなただけで、各区間であなたのキャンバスをクリアする必要があると仮定しますcontext.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

あなたは各「層」重複するかもしれない何のためのすべてのフレームを描画する必要があります。 たとえば、ストップウォッチの背面を描画し、次に各フレームを描画します。

I.E.どんなテキストと背景を描いていることでaddTime