Why is it crooked when converting radians to degrees when drawing a circle on canvas?

Question

css

When drawing a circle through setInterval - the circle is not drawn clearly. What is the jamb?

<canvas class="canvas"></canvas>
  <div class="btn"></div>
  <style>

  .canvas{
    width: 600px;
    height: 300px;
    background: #fff;
  }
  .btn{
    width: 100px;
    height: 50px;
    background: red;
  }
  </style>
  <script>
  var btn = document.querySelector('.btn');
  var canvas = document.querySelector('.canvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;

      var centerY = canvas.height / 2;
      var radius = 30;
      function getRadians(degrees) {
  return (Math.PI/180)*degrees;
}
  var degrees = 0;
function foo(){
  var setInterval_1 = setInterval(
    function (){
      
      if(degrees<=360){
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, getRadians(degrees), false);
      context.lineWidth = 1;
      context.fill
      context.strokeStyle = '#003300';
      context.stroke();
      degrees+= 1;
      btn.innerHTML = Math.floor(degrees/360*100) + "%";
  		}
      
      },
      5);
  
  degrees = 0;
  context.clearRect(0, 0, canvas.width, canvas.height);
}

  btn.addEventListener("click", foo);

Answer 1

As an option

Answer 2

You need to specify a resolution for the canvas. The default is 300x150

<canvas class="canvas" width="600px" height="300px"></canvas>

Answer 3

<canvas class="canvas"></canvas>
  <div id="btn"></div>
  <style>

  .canvas{
  width: 600px;
  height: 300px;
  background: #fff;
  }
  .canvas+#btn{
  width: 100px;
  height: 50px;
  background: red;
  }
  </style>

  <script>
  'use strict';
  var canvas = document.querySelector('.canvas'),
  	btn = document.querySelector('.canvas+#btn'),
  context = canvas.getContext('2d'),
  centerX = canvas.width / 2;

    var centerY = canvas.height / 2;
    var radius = 30;
  function getRadians(degrees) {
    return (Math.PI/180)*degrees;
  }


function foo() {
  var degrees = 0;
 	var setInterval_1 = setInterval( function () {
 		if(degrees>=360) clearInterval(setInterval_1);
 		context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, getRadians(degrees), false);
    context.lineWidth = 2;
    context.strokeStyle = '#003300';
    context.stroke();
    degrees+= 5;
    btn.innerHTML = Math.floor(degrees/360*100) + "%";

  }, 10);

}

  btn.addEventListener("click", foo);
  </script>