Em 02:10 Não entendi o motivo de haver espaços em branco acima e à esquerda da tela cinza tendo em vista que a mesma começa a ser desenhada em (0,0).
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Em 02:10 Não entendi o motivo de haver espaços em branco acima e à esquerda da tela cinza tendo em vista que a mesma começa a ser desenhada em (0,0).
Boa tarde Pablo, tudo joia? Eu sou iniciante também, mas pelo que entendi, os espaços em branco que ele se refere são gerados pelo navegador (por padrão eles colocam margens na página) o que ele fez aqui:
var x = evento.pageX - tela.offsetLeft; // referente ao lado esquerdo do canvas
var y = evento.pageY - tela.offsetTop; // referente ao lado de cima do canvas
Foi pegar o evento de X e de Y que só acontece dentro do espaço que criamos (CANVAS) que é de x = 600px e y = 400px e tirar (subtrair) da margem criada pela navegador. Assim, o navegador entende que o canvas ocupa esse espaço que estava em branco. Espero que eu tenha conseguido te explicar com forma simples. Qualquer dúvida chama ai que tento te ajudar.