Oi José Henrique, tudo bem?
Obrigado pela paciência em aguardar uma resposta!
Parabéns pela organização, clareza e boa indentação do seu código. Ao observar o resultado obtido, percebi que você personalizou o rosto do personagem, isso é muito bacana, pois realizar tais alterações ajuda a compreender melhor a lógica por detrás dos comandos.
Tenho algumas sugestões para deixar a escrita do seu código mais reduzida:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//Retângulo 01 - Cabeça
pincel.fillStyle = 'green'
pincel.fillRect(50, 50, 350, 300);
//Retângulo 02 e 03 - olhos
pincel.fillStyle = 'black';
pincel.fillRect(105, 90, 90, 90); // esquerdo
pincel.fillRect(260, 130, 90, 20); // direito
//Retângulo 04 - nariz
pincel.fillRect(195, 180, 70, 100);
//Retângulo 05 - boca
pincel.fillRect(155, 290, 150, 20);
pincel.fillRect(305, 270, 20, 20);
</script>
Perceba que eu removi dos retângulos 4 e 5 a linha pincel.fillStyle = 'black';
. Essa propriedade se refere ao estilo de cor utilizado pelo pincel, e ela se repete para todos os elementos criados abaixo até que seja utilizada novamente para trocar a cor desejada. Como você utilizou ela no retângulo 2, ela não precisaria estar presente nos retângulos subsequentes, a menos que eles tivessem cores distintas.
Outra observação que fiz em seu código foi remover a linha comentada que descrevia o olho direito. Dessa forma, juntei o desenho dos dois olhos num mesmo bloco e identifiquei cada um por meio de comentários nas linhas de comando.
A última mudança é referente a forma de realizar as linhas comentadas. O padrão que você utilizou (/*Retângulo 01 - Cabeça*/
) se adequa melhor para comentar grande volume de linhas de código. Para comentar apenas uma linha você pode utilizar uma dupla de barras (//Retângulo 01 - Cabeça
).
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição para te auxiliar :)
Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.