Mi solución para que lo que vaya... vuelva

<canvas
  width="600"
  height="130"
  style="
    border: 6px solid black;
    margin-left: 10cm;
    margin-top: 2cm;
    border-radius: 12px 0 10px 0;
    background: lightblue;
  "
></canvas>

<script>
  var pantalla = document.querySelector("canvas");
  var pincel = pantalla.getContext("2d");
  pincel.fillStyle = "grey";
  pincel.fillRect(0, 0, 600, 400);

  function disenharCircunsferencia(x, y, radio) {
    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(x, y, radio, 0, 2 * Math.PI);
    pincel.fill();
  }
  function disenharCircunsferencia2(x, y, radio) {
    pincel.fillStyle = "red";
    pincel.beginPath();
    pincel.arc(x, y, radio, 0, 2 * Math.PI);
    pincel.fill();
  }

  function disenharCircunsferencia3(x, y, radio) {
    pincel.fillStyle = "BLACK";
    pincel.beginPath();
    pincel.arc(x, y, radio, 0, 2 * Math.PI);
    pincel.fill();
  }

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

  var x = 0;
  var sentido = 1;

  function actualizarPantalla() {
    limpiarPantalla();

    /* DAR CONDICION DE IDA Y VUELTA */
    if (x > 600) {
      sentido = -1;
    } else if (x < 0) {
      sentido = 1;
    }

    disenharCircunsferencia(x, 20, 10);
    x = x + sentido;
    disenharCircunsferencia2(x, 60, 10);
    x = x + sentido;
    disenharCircunsferencia3(x, 100, 10);
    x = x + sentido;
  }

  setInterval(actualizarPantalla, 30);
</script>