¿Cómo hacer que una función se ejecute solo una vez?

Quería presentar un número fijo de círculos (en este caso 10) en el lienzo con una línea móvil de lado a lado, la función de “círculos” se ejecuta en cada fotograma que se ejecuta la función de bucle (loop), por lo que hay una manera de detener el comportamiento. Ni siquiera estoy seguro de si estoy pensando correctamente al tener círculos disparando una vez.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

fetch("http://api.open-notify.org/astros.json")
  .then((res) => res.json())
  .then((data) => {
    var x = 0;
    var s = 1;
    function circles() {
      for (var i = 0; i < data.number; i++) {
        let randW = Math.floor(Math.random() * (290 - 10) + 10);
        let randH = Math.floor(Math.random() * (140 - 10) + 10);
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(randW, randH, 5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
      }
    }
    function draw() {
    //   ctx.clearRect(0, 0, canvas.width, canvas.height); // // use with setInterval(draw,10)
      circles();
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
      x += s;
      ctx.strokeStyle = "white";
      ctx.stroke();
      if (x == canvas.width || x == 0) {
        s = s * -1;
      }
    }
    // setInterval(draw, 10);
    function loop() {
        ctx.clearRect(0,0,canvas.width, canvas.height);
        draw();
        requestAnimationFrame(loop);
    }
    requestAnimationFrame(loop);
  });