Entendi o código mas ainda tenho duvidas em relação a ele.

Olá, Anderson. Eu estou com a mesma dificuldade que você em relação a essa nova aula, mas dei uma pesquisada rápida e descobri porque essas teclas têm esse valor. Esses números correspondem à função da tecla do teclado. É como o computador irá entender. Pra ele, o botão "cima" é, na verdade, o número 38. Neste site que irei anexar você consegue ver o valor de cada tecla do seu teclado, caso tenha interesse. https://www.toptal.com/developers/keycode

E em relação a outra dúvida, vou mostrar o meu código comentado com as explicações pra ver se te ajuda.

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

<script>

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

    var x = 200;
    var y = 200;

     // código do teclado.
    // cada número representa a função em si. É como a máquina entende a função da tecla.

     var esquerda = 37;
     var direita = 39;
     var cima = 38;
     var baixo = 40;

     var taxa = 20; // taxa de incremento. Corresponde ao "salto" da bolinha.

    function desenhaCirculo(x, y, raio) {

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

    function resetaTela() { // desenha um novo canvas em cima do anterior, para apagar a bolinha feita anteriormente.

        pincel.fillStyle = "lightgray";
        pincel.fillRect(0,0,800,600);
    }

    function atualizaTela() { // apaga a bolinha anterior e desenha uma nova bolinha, na nova coordenada, criando a alusão de movimento.

        resetaTela();
        desenhaCirculo(x, y, 30);
    }

    setInterval(atualizaTela, 20);

        function leDoTeclado(evento) { // função criada para testar qual tecla foi pressionada.

            if (evento.keyCode == cima && y > 35) { // se o valor da tecla corresponder ao valor de 38, ou seja, a tecla "cima", e o valor de y for maior que 35, o valor de y perde o valor da taxa (20), fazendo com que a bolinha se mova para cima.

                y = y - taxa;

            }

            if (evento.keyCode == baixo && y < 575) { // se o valor da tecla corresponder ao valor de 40, ou seja, a tecla "baixo". e o valor de y for menor que 575, o valor de y ganha o valor da taxa (20), fazendo com que a bolinha se mova para baixo.

                y = y + taxa;

            }

            if (evento.keyCode == esquerda && x > 35) { // se o valor da tecla corresponder ao valor de 37, ou seja, a tecla "esquerda", e o valor de x for menor que 35, o valor de x perde o valor da taxa (20), fazendo com que a bolinha se mova para a direita.

                x = x - taxa;

            }

            if (evento.keyCode == direita && x < 775) { // se o valor da tecla corresponder ao valor de 39, ou seja, a tecla "direita", e o valor de x for maior que 775, o valor de x ganha o valor da taxa (20), fazendo com que a bolinha se mova para a direita. 

                x = x + taxa;

            }

            /*
            alert("uma tecla foi pressionada!"); // um simples teste para saber se a função é chamada independente de qual tecla é pressionada.
            */

    }

    document.onkeydown = leDoTeclado; // sempre que uma tecla for pressionada a função "leDoTeclado" será chamada, independente da tecla.

</script>