joshvermaire/arc.html

## arc.html
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var TIMER_LENGTH = 10000; // 10 seconds

      var interval = TIMER_LENGTH / 360; //miliseconds per degree increment

      var startTime;

      function step(timestamp) {
        startTime || (startTime = timestamp);

        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 75;

        var endDegrees = (timestamp - startTime) / interval;

        var startAngle = getRadians(0);
        var endAngle = getRadians(endDegrees)

        // Animate the canvas
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise=false);
        context.lineWidth = 15;

        // line color
        context.strokeStyle = 'black';
        context.stroke();

        // Rerun the step function
        requestAnimationFrame(step)
      }

      // Run the step function
      requestAnimationFrame(step)

      function getRadians(degrees) {
        degrees = degrees - 90
        return degrees * (Math.PI / 180)
      }

    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	</style>
	</head>
	<body>
	<canvas id="myCanvas" width="578" height="250"></canvas>
	<script>
	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');

	var TIMER_LENGTH = 10000; // 10 seconds

	var interval = TIMER_LENGTH / 360; //miliseconds per degree increment

	var startTime;

	function step(timestamp) {
	startTime \|\| (startTime = timestamp);

	var x = canvas.width / 2;
	var y = canvas.height / 2;
	var radius = 75;

	var endDegrees = (timestamp - startTime) / interval;

	var startAngle = getRadians(0);
	var endAngle = getRadians(endDegrees)

	// Animate the canvas
	context.beginPath();
	context.arc(x, y, radius, startAngle, endAngle, counterClockwise=false);
	context.lineWidth = 15;

	// line color
	context.strokeStyle = 'black';
	context.stroke();

	// Rerun the step function
	requestAnimationFrame(step)
	}

	// Run the step function
	requestAnimationFrame(step)

	function getRadians(degrees) {
	degrees = degrees - 90
	return degrees * (Math.PI / 180)
	}

	</script>
	</body>
	</html>