HTML Canvas Separating Strokes

I made a simple canvas program that draws a spiral starting from the canvas’s center, using a line that constantly has new points drawn. It works until another shape or line is added, and I can’t think of any way to fix it. Is there any way to separate these two strokes without using a beginPath() before the lineTo()?

const canvas = document.querySelector(“canvas”);
canvas.width = innerWidth;
canvas.height = innerHeight;
const c = canvas.getContext(“2d”);

let x, y;
let i = 0;
const animate = function() {
requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);

c.lineTo(x, y);
c.stroke();

// c.beginPath();
// c.beginPath();
// c.arc(canvas.width / 2, canvas.height / 2, 20, 0, Math.PI * 2, false);
// c.strokeStyle = “red”;
// c.stroke();
// c.closePath();

x = canvas.width / 2 + Math.cos(i * Math.PI / 180) * i;
y = canvas.height / 2 + Math.sin(i * Math.PI / 180) * i;
i += 5;
}

animate();