Poxs eu realmente nao entendi essa aula !!

Nao consigo ver o conteúdo..

Somos 2!

Olá, Guilherme!

Também tive essa dificuldade e tentei trazer o meu entendimento pra você através dos comentários ao lado de cada linha.

Espero poder ter ajudado.

Abraços!

<script type="text/javascript">
        var screen = document.querySelector("canvas");
        var brush = screen.getContext ("2d");
        brush.fillStyle = "black";
        brush.fillRect (0,0,600,400);
        var x = 300; //coordenada inicial "X".
        var y = 200; //coordenada inicial "Y".
        var up = 38;
        var down = 40;
        var right = 39;
        var left = 37;
        var rate = 10; //taxa de "movimento" do objeto (circunferência). Quanto maior, maior sera a distância inicial(pré movimento) e a final (pós movimento).
        function displayCircle(x,y,radius){ //desenha circunferência.
            brush.fillStyle = "white";
            brush.beginPath();
            brush.arc(x,y,radius,0,2*Math.PI);
            brush.fill();
        }
        function clear(){ //apaga área do retângulo conforme dimensões de "brush.clearRect".
            brush.clearRect(0, 0, 600, 400); //apaga o retângulo conforme dimensões definidas.
            brush.fillStyle = "black"; //Associado ao brush.fillRect (abaixo) reexibi o retângulo na cor original (ver brush.fillStyle) toda vez que a tela for apagada(brush.clearRect). Sem isso a tela fica branca quando o clearRect é acionado.
            brush.fillRect(0,0,600,400);
        }
        function upDate(){ //atualiza a tela e chama a função desenha circulo (displayCircle). É repetida (atualizada) por "setInterval".
            clear();
            displayCircle(x,y,20);
        }
        setInterval(upDate,20); //"setrInterval" Repete chamadas de função. setrInterval("função a ser repetida" - upDate - ,"tempo de atualização em milissegundos" - 20).
        function readKeyBoard (event){
            if(event.keyCode==up && y>10){ //"key" lê o valor da tecla pressionada. "Code" mantém uma string (sequências de caracteres alfanuméricos - letras, números e/ou símbolos) que identifica a tecla sendo pressionada.
                y=y-rate; //diminui, em relação a cordenada "Y", o valor da "rate", toda vez que a tecla direciona "up" for acionada.
            }else if (event.keyCode==down && y<390){
                y=y+rate; //aumenta, em relação a cordenada "Y", o valor da "rate", toda vez que a tecla direciona "down" for acionada.
            }else if (event.keyCode==left && x>10){
                x=x-rate; //diminui, em relação a cordenada "X", o valor da "rate", toda vez que a tecla direciona "left" for acionada.
            }else if (event.keyCode==right && x<590){
                x=x+rate;  //aumento, em relação a cordenada "X", o valor da "rate", toda vez que a tecla direciona "right" for acionada.
            }
        }
        document.onkeydown = readKeyBoard; //"document" identifica o que acontece na página. "onkeydown" identifica a tecla que está sendo pressionada.
    </script>

Qualquer dúvida é só dá um salve.