Dúvida

Olá, Matheus, relembrando o que cada uma significa, temos que:

Na var tela = document.querySelector('canvas'); pedimos para o document executar a função querySelector( ) para pegar o canvas (que está no mundo html) e passá-lo como valor na variável tela. Isso nos dá a área para escrever.

Na var pincel = tela.getContext('2d'); (que recebe como valor a variável tela) precisamos informar à tela qual o tipo de pincel, ou seja, o contexto no qual escreveremos na tela. Para isso, utilizamos o getContext() e passamos o 2d como parâmetro.

Ou seja, qualquer função que tenha por objetivo desenhar/mostrar algo no canvas (tela de desenho) precisa ter esses comandos como parte das instruções contidas nela para poder funcionar quando ela for chamada. Se eles ficarem fora da função, quando esta for chamada, o desenho não acontecerá, pois não teremos nem a tela nem o pincel para isso.

Espero ter contribuído para esclarecer sua dúvida. Bons estudos!

Ajudou, muito obrigadado.