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

<script>
  let tela = document.querySelector("canvas");
  let pincel = tela.getContext("2d");
  pincel.fillStyle = "lightgray";
  pincel.fillRect(0, 0, 600, 400);

  let x = 20;
  let y = 20;

  // códigos do teclado
  let esquerda = 37;
  let cima = 38;
  let direita = 39;
  let baixo = 40;

  // taxa de incremento
  let taxa = 10;

  desenhaCirculo = (x, y, raio, cor) => {
    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();
  };

  limpaTela = () => {
    pincel.clearRect(0, 0, 600, 400);
  };

  let cor = "blue";
  atualizaTela = () => {
    limpaTela();
    // se a bolinha tocar no limite muda de cor
    if (x == 590 || y == 10 || x == 20 || y == 390) {
      cor = "red";
    } else {
      cor = "blue";
    }
    desenhaCirculo(x, y, 10, cor);
  };

  setInterval(atualizaTela, 10);

  leDoTeclado = (evento) => {
    // limita o espaço que a bolinha pode percorrer
    if (evento.keyCode == esquerda && x >= 30) {
      x -= taxa;
    } else if (evento.keyCode == direita && x < 590) {
      x += taxa;
    } else if (evento.keyCode == cima && y > 10) {
      y -= taxa;
    } else if (evento.keyCode == baixo && y < 390) {
      y += taxa;
    }
  };

  document.addEventListener("keydown", leDoTeclado);
</script>