[Dúvida] Como é o funcionamento do setInterval quando o usuário é responsável pelo movimento da bolinha

Nas aulas anteriores vimos que o setInterval junto com a função atualizaTela será o responsável por dar o efeito da animação, pq ele vai apagar a tela anterior e uma nova bolinha será desenhada.

Neste caso colocamos o tempo como 20 milisegundos. No entanto, como é o usuário que fará o movimento com as setas do teclado, não entendi muito bem como é o funcionamento do setInterval para esse código.

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

<script>

  var tela = document.querySelector ('canvas');
  var pincel = tela.getContext ('2d');
  pincel.fillStyle = 'lightgrey'; 
  pincel.fillRect (0, 0, 600, 400); 


  var x = 20;

  var y = 20;


  //códigos do teclado

  var esquerda = 37;

  var cima = 38;

  var direita = 39;

  var baixo = 40;


  // taxa de incremento

  var taxa = 10;


function desenhaCirculo (x, y, raio) {


        pincel.fillStyle = 'blue';
        pincel.beginPath ();
        pincel.arc (x,y,raio,0,2 * Math.PI);
        pincel.fill ();

}


function limpaTela () {

    pincel.clearRect (0,0,600,400);

}



function atualizaTela () {

  limpaTela ();
  desenhaCirculo (x, y, 10);

}

  setInterval (atualizaTela, 20);

function leDoTeclado(evento) {


  if (evento.keyCode == cima) {

    y = y - taxa

  } else if (evento.keyCode == baixo) {

    y= y+taxa

  } else if (evento.keyCode == direita) {

    x = x + taxa

  } else if (evento.keyCode == esquerda) {

    x = x - taxa
  }

}

   document.onkeydown = leDoTeclado;




</script>