Animação da bolinha com setas

Nesse exercício utilizei uma ideia semelhante ao do professor e coloquei alguns limitadores para que a bolinha não ultrapasse o quadro em X e Y (tanto abaixo de 20 quanto acima de 580 e 380) para que a bolinha fique inteira na tela.

Nessa atividade eu senti falta de um vídeo explicando, pelo menos a parte inicial. Algumas pessoas tem maior facilidade para captar as informações pelo ouvir, mas fica a sugestão para facilitar o aprendizado.

segue minha resolução do exercício:

<meta charset="utf-8">
<h1>Comandando pelo teclado</h1>
<hr><br>
<canvas width="600" height= "400"></canvas>

<script type="text/javascript">
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0,0,600,400);

    var x = 20;
    var y = 20;

    //códigos do teclado
    //lista de valores universal
    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){
        /*sabemos que é através do evento.keyCode
        que temos acesso ao cód da tecla
        pressionada.*/
        var teclaPressionada = evento.keyCode;

        if (teclaPressionada == esquerda) {
            x=x-taxa;
            if (x<20) {
                x =20;
            }
        } else if (teclaPressionada == cima) {
            y=y-taxa;
            if (y<20) {
                y =20;
            }
        } else if (teclaPressionada == direita) {
            x=x+taxa;
            if (x>580) {
                x =580;
            }
        } else if (teclaPressionada == baixo) {
            y=y+taxa;
            if (y>380) {
                y =380;
            }
        }
console.log (x + ', '+ y);
    }

    document.onkeydown = leDoTeclado;


</script>

dessa forma ele fica legível ou teria alguma forma de colocar esses limitadores em uma função para que fosse chamada para verificar o X e Y e validar os valores dentro do esperado (X>20 e X<580 e Y>20 e Y<380)?