As coordenadas do meu creeper ficaram diferentes, mas deu certo.

Hey!

A cabeça do bixin medindo W=350, H=300 eu quis deixar beeem no centro da nossa tela (W=600, H=400). Meu bixin ficou todo simétrico, idêntico, mas todas as suas coordenadas ficaram diferentes da resolução do professor. Mas, depois reparei na imagem referência que a cabeça do creeper do professor estava um pouquinho mais para cima e mais próximo da esquerda do que da direita. Minha grande pergunta é: Para eu ter exercitado a lógica adequadamente, eu deveria ter deixado a cabeça do bixin meio deslocada também? Como eu deixei a cabeça no centro da "tela" maior, ficou mais fácil traçar as cotas e conseguir as coordenadas, o que por outro lado teria sido mais desafiador se eu tivesse que deixar ela meio deslocada igualzinho na imagem referência.

Abaixo, meu código:

<canvas width="600" height="400"></canvas> 


<script>


    var tela = document.querySelector('canvas');

    var pincel = tela.getContext('2d'); 

    //fundo
    pincel.fillStyle = 'lightgrey'; 
    pincel.fillRect(0, 0, 600, 400); 

    //cabeça
    pincel.fillStyle = 'darkgreen'; 
    pincel.fillRect(125, 50, 350, 300); 

    //olhos
    pincel.fillStyle = 'black'; 
    pincel.fillRect(175, 110, 90, 90);
    pincel.fillRect(335, 110, 90, 90);

    //boca
    pincel.fillRect(225, 240, 40, 110);    
    pincel.fillRect(335, 240, 40, 110);

    //nariz
    pincel.fillRect(265, 200, 70, 100);


</script>

abaixo, meu bixin (deixei o fundo cinza pra vocês conseguirem ver o alinhamento):


Obrigado desde já, galera boa!