[imedia]

Можете мне сказать почему черный круг вдруг возвращается назад на 90 градусов?

<canvas id="canvas"> Браузер не поддерживает canvas</canvas>
<script>

window.onload = function() {
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
	  canvas.style.width=600;
	canvas.style.height=300;
	canvas.width=1200;
	canvas.height=600;
      var x = canvas.width /2;
      var y = canvas.height / 2;
       
      var counterClockwise = false;
	  var run_wight = function() {
	  var radius = 195;
        var time = (new Date().getTime()- startTime)/ duration;
        var startAngle = getRadians(-90);
        var endAngle = getRadians(360);
        context.lineWidth = 4;
        context.strokeStyle = 'rgba(0,0,0,1)';
        if(time < 1) {requestAnimationFrame(run_wight);
          endAngle = startAngle +(endAngle - startAngle)* time;
        }
        else {
          duration = 1000,
          startTime = new Date().getTime();
		  run_red();
        };
        context.clearRect(0, 0, 600, 300);
        context.beginPath();
		context.lineWidth = 4;
		context.strokeStyle = 'rgba(0,0,0,1)';
		context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.stroke();
      };
      var run_red = function() {
        var time = (new Date().getTime()- startTime)/ duration;
		var radius = 210; 
        var startAngle = getRadians(-90);
        var endAngle = getRadians(0);
        context.strokeStyle = 'rgba(175,9,54,1)';
		context.lineWidth = 22;
        if(time < 1) {requestAnimationFrame(run_red);
          endAngle = startAngle +(endAngle - startAngle)* time;
        }
        else {
          duration = 1000,
          startTime = new Date().getTime();
		
          run_rose();
        };
           context.clearRect(0, 0, 600, 300);
		context.beginPath();
		context.lineWidth = 22;
		 context.strokeStyle = 'rgba(175,9,54,1)';
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.stroke();
      };
      function run_rose()
      {
        var time = (new Date().getTime()- startTime)/ duration;
        var startAngle = getRadians(-90);
        var endAngle = getRadians(0);
        context.lineWidth = 22;
      var radius = 180;
        if(time < 1) {requestAnimationFrame(run_rose);
          endAngle = startAngle +(endAngle - startAngle)* time;
        };
          context.clearRect(0, 0, 600, 300);
		context.beginPath();
		 context.strokeStyle = 'rgba(251,79,134,1)';
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.stroke();
       
      }
      var duration = 1000,
      startTime = new Date().getTime();
      run_wight();
	 function getRadians(degrees) {
        return degrees * (Math.PI / 180);
    }
    }
</script>