¡Ya que va, que vuelva!

<canvas width="600" height="400"></canvas>

<script>
  let pantalla = document.querySelector("canvas");
  let pincel = pantalla.getContext("2d");

  function disenharCircunferencia(x, y, radio) {
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(x, y, radio, 0, 2 * Math.PI);
    pincel.fill();
  }

  function limpiarPantalla() {
    pincel.clearRect(0, 0, 600, 400);
  }

  let circunferenciaXpos = 0;
  let direccion = 0;

  function moverCircunferenciaDerecha() {
    limpiarPantalla();
    disenharCircunferencia(circunferenciaXpos, 20, 10);
    circunferenciaXpos += 5;
    if (circunferenciaXpos == 600) {
      direccion = 1;
    }
  }

  function moverCircunferenciaIzquierda() {
    limpiarPantalla();
    disenharCircunferencia(circunferenciaXpos, 20, 10);
    circunferenciaXpos -= 5;
    if (circunferenciaXpos == 0) {
      direccion = 0;
    }
  }

  function animarCircunferencia() {
    if (direccion) {
      moverCircunferenciaIzquierda();
    } else {
      moverCircunferenciaDerecha();
    }
  }

  setInterval(animarCircunferencia, 21);
</script>