Как сделать так, чтобы canvas не закрашивал пространство, а совершал цикличное движение ?

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Устанавливаем размер канваса
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const stars = []; // массив для хранения звезд

// Создаем звезды
for (let i = 0; i < 100; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 2,
speed: Math.random() * 0.5
});
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // очищаем предыдущее состояние

// Рисуем звезды
for (let i = 0; i < stars.length; i++) {
const star = stars[i];

ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fill();

// Обновляем положение звезды
star.x += Math.cos(star.speed) * 2;
star.y += Math.sin(star.speed) * 2;

// Проверяем, чтобы звезда оставалась в пределах канваса
if (star.x < 0 || star.x > canvas.width || star.y < 0 || star.y > canvas.height) {
star.x = Math.random() * canvas.width;
star.y = Math.random() * canvas.height;
}
}

requestAnimationFrame(draw); // повторяе
м анимацию
}

draw(); // начинаем анимацию

 (()=>{
	let $ = c.getContext("2d"),
		w = c.width = window.innerWidth,
		h = c.height = window.innerHeight,
		random = n=>Math.random()*n,
		stars = new Array(1000).fill().map(()=>{
		  return {r: random(w), s: random(0.01), a: random(Math.PI*2)};
		});
  
	console.log(stars)
	function loop(){
	  $.fillStyle = "rgba(0,0,9,0)";
	  $.fillRect(0,0,w,h);
	  stars.forEach(e=>{
		e.a+=e.s;
		$.beginPath();
		$.arc(Math.cos(e.a)*e.r + w/2, Math.sin(e.a)*e.r + h/2, 1,0,Math.PI*2);
		$.closePath();
		$.fillStyle = "white";
		$.fill();
	  })
  
	  requestAnimationFrame(loop);
	}
	requestAnimationFrame(loop);
	window.addEventListener("resize", ()=>{
	  w = c.width = window.innerWidth;
	  h = c.height = window.innerHeight;
	})
  })() 

Ну поставь 0.1 а не 0