Pelota

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

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

  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, altoPantalla, anchoPantalla);
  }

  var rebotar = true;

  function actualizarPantalla() {
    limpiarPantalla();
    disenharCircunferencia(posicionx, 20, 10);

    if (rebotar) {
      posicionx++;
      if (posicionx == anchoPantalla) {
        rebotar = false;
      }
    } else {
      posicionx--;
      if (posicionx == 0) {
        rebotar = true;
      }
    }
  }
  setInterval(actualizarPantalla, 10);
</script>