Dúvida - função desenhaQuadradoVerde()

Separar o código por funções torna o código mais legível, o nome da função irá descrever o que aquele bloco de código faz a nível do algoritmo.

No exemplo acima, você consegue manipular a variável pincel fora da função porque ela foi declarada no contexto global, sendo assim você pode usar a variável dentro e fora da função.

O código que você inseriu é mais fácil de entender do que o seguinte

<canvas width="600" height="400"></canvas>
<script>
    var tela=document.querySelector('canvas');
    var pincel=tela.getContext('2d');
    pincel.fillStyle='green';
    pincel.fillRect(0,0,50,50);
    pincel.strokeStyle='black';
    pincel.strokeRect(0,0,50,50);
</script>

Perceba que sem o nome da função, outro programador que fosse ler este código, teria que analisar para compreender todas as linhas do algoritmo, se o bloco de código estiver na função desenhaQuadradoVerde, fica mais fácil entender o que o código está querendo fazer.

Obrigado Manoel!