circulo de izquierda a derecha, derecha a izquierda.

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

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

      function disenharCircunferencia(x, y, radio) {
        pincel.fillStyle = "blue";
        pincel.beginPath();

        pincel.arc(x, y, radio, 0, 2 * Math.PI);
        pincel.fill();
      }

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

      var x = 0;
      let direccion = true;
      function actualizarPantalla() {
        limpiarPantalla();
        disenharCircunferencia(x, 20, 10);
        if (direccion) {
          x++;
          if(x===600){
            direccion=false
          }
        } else{
          x--;
          if(x===0){
            direccion=true
          }
        }
      }
      setInterval(actualizarPantalla, 1);
    </script>