[Duda] Tengo una inquietud.

¡Hola Amed!

Lo que está pasando es que el último círculo está borrando al primero, causando un bug. Esto sucede que la función dibujar pantalla borra toda la pantalla para dibujar las nuevas posiciones del círculo y esto es lo que hace parecer que se están moviendo. Para solucionar este problema podemos crear una función para cada círculo y también una variable de sentido para cada eje.

Con esto podemos llamar las dos funciones dentro de actualizar pantalla y también llamar la función limpiar pantalla solo una vez por actualización.

Vea un ejemplo de como hacerlo abajo:

<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;
  var y = 0;
  var sentidoX = 1;
  var sentidoY = 1;

  function circuloParaLosLados() {
    if (x > 600) {
      sentidoX = -1;
    } else if (x < 0) {
      sentidoX = 1;
    }

    disenharCircunferencia(x, 20, 10);
    x = x + sentidoX;
  }

  function circuloParaAbajoArriba() {
    if (y > 400) {
      sentidoY = -1;
    } else if (y < 0) {
      sentidoY = 1;
    }

    disenharCircunferencia(20, y, 10);
    y = y + sentidoY;
  }

  function actualizarPantalla() {
    limpiarPantalla();
    circuloParaLosLados();
    circuloParaAbajoArriba();
  }

  setInterval(actualizarPantalla, 20);
</script>

Cualquier duda que tengas puedes volver a comentar aquí, estaré pendiente :) .

¡Saludos!