Проблема с анимацией JQuery при рисовании нескольких дуг в холсте

Question

Я пытаюсь создать приложение часов. Я хочу анимировать и рисовать дуги на холсте, когда они начинаются, но он только рисует одну из двух дуг, которые я сделал. Как я могу убедиться, что во время анимации рисуются обе дуги? Я хочу, чтобы один знак был зарисован за другим.

JSFiddle

HTML

<canvas id="clock" width="1000" height="500"></canvas> 

CSS

body 
{ 
    background: #1A4978; 
} 

JS/JQuery

var canvas = document.getElementById('clock'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/4; 
var y = canvas.height/2; 
var radius = 150; 
var startAngle = 0; 
var endAngle = 2*Math.PI; 

var startAnimationDone = false; 

if (startAnimationDone == true) 
{ 
    var date = new Date(); 
    var year = date.getFullYear(); 
    var month = date.getMonth(); 
    var day = date.getDay(); 
    var hour = date.getHours(); 
    var minute = date.getMinutes(); 
    var second = date.getSeconds(); 
} 

function update(start, end) 
{ 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    context.beginPath(); 
    context.strokeStyle = "#FF7519"; 

    context.arc(x , y, radius, start, end); 
    context.lineWidth = 10; 
    context.stroke(); 
    context.closePath(); 

    context.beginPath(); 
    context.strokeStyle = "#FFA319"; 
    radius = 160; 

    context.arc(x , y, radius, start, end); 
    context.lineWidth = 10; 
    context.stroke(); 
    context.closePath(); 
} 

$(document).ready(function() 
{ 
    var time = 0; 
    var count = 0; 
    function startAnimation() 
    { 
     if (count <= 2) 
     { 
      time += 0.02; 
      update(0, time*Math.PI); 
      count += 0.02; 
     } 
    } 
    setInterval(startAnimation, 10); 
    startAnimationDone = true; 
}); 

Answer 1

Вот обновленная версия вашей скрипки:

https://jsfiddle.net/uawc8pu7/3/

else if (!startAnimationDone) { 
    clearInterval(intervalID); 
    startAnimationDone = true; 
} 

я добавил проверку, чтобы увидеть, когда ваши startAnimationDone изменений переменных в true, после чего код будут начать новую анимацию другая дуга. Код можно также очистить :)