Why is the animated circle in canvas not perfectly full?

I have a problem: I am trying to animate a circle. The circle should start shrinking from the top right to bottom left, until its perfectly full. The problem is – that its not.

const canvas = document.getElementById("circle");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.lineWidth = 7;

const speed = 40;

const drawCircle = (
  x,
  y,
  r,
  startPoint = 0,
  endPoint = 2 * Math.PI,
  fill = true
) => {
  ctx.beginPath();
  ctx.arc(x, y, r, startPoint, endPoint);
  if (fill) ctx.fill();
  ctx.stroke();
};

let endPoint = 1.75 * Math.PI;
let startPoint = 1.75 * Math.PI;

function animateCircle() {
  if (startPoint >= 0.75 * Math.PI && endPoint <= 2.75 * Math.PI) {
    drawCircle(280, 210, 20, startPoint, endPoint);
    endPoint += Math.PI / speed;
    startPoint -= Math.PI / speed;
    requestAnimationFrame(animateCircle);
  }
}
requestAnimationFrame(animateCircle)

#circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <canvas id="circle" height="450px" width="450px"></canvas>
  <script src="script.js"></script>
</body>
</html>

fiddle.

I tried logging the values of startPoint and endPoint into console and it logged slightly different values (for example, at the end, the value of startPoint should be 0.75, but its something like 0.7492840947). Idk if why is that happening and if its the reason.