07 A cara do Creeper

Oi, Shellen! Como vai?

Está correto sim ;-)

Porém, se nós mudarmos a cor de fundo do canvas veremos que ele não está centralizado. Não que seja um erro, tá bom?! De repente você pode preencher os espaços com algumas outras formas... e aí a criativade não tem limite!

Faça um teste. Após o início do código

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

acrescente uma cor ao fundo

    pincel.fillStyle = 'grey' //canvas
    pincel.fillRect(0, 0, 600, 400);

Verá que o Creeper está mais para o canto superior direito.

Mas está perfeito, Shellen!

Você tem ido bem! Continue assim!

Bons estudos e vamos em frente!

Entendi o que falou, nesse caso, o ideal é eu centralizar dentro do meu canvas que é de 600x400 ou criar o canvas no tamanho de 350x300?

Agora entendi, veja refiz novamente:

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

</canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'grey';    
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'darkgreen';    
    pincel.fillRect(125, 100, 350, 300);

    pincel.fillStyle = 'black';    
    pincel.fillRect(180, 130, 90, 90);

    pincel.fillStyle = 'black';    
    pincel.fillRect(320, 130, 90, 90);

    pincel.fillStyle = 'black';    
    pincel.fillRect(260, 220, 70, 100);    

    pincel.fillStyle = 'black';    
    pincel.fillRect(220, 300, 40, 110);    

    pincel.fillStyle = 'black';    
    pincel.fillRect(330, 300, 40, 110);    
</script>

Só uma dúvida, no caso para saber a cordenada X e Y como faria, nesse caso, eu dividi o valor de x por 2. Mas a cordenada tive que ir testando praticamente. Só fiquei com essa dúvida. Sobre o calculo das cordenadas.

Oi, Shellen! Como vai?

A melhor maneira é ir testando mesmo!

Perfeito para aprender!!!

Sobre as coordenadas, ao vermos o canvas que tem o valor x de 600 vamos analisar ;-)

    pincel.fillStyle = 'darkgreen';    
    pincel.fillRect(125, 100, 350, 300);

traduzindo esse pincel.fillRect ele quer dizer

    pincel.fillStyle = 'darkgreen';    
    pincel.fillRect(x, y, x, y);

Sabendo que a coordenada X é horizontal e a coordenada Y é vertical, a primeira coordenada é 125, então esse será nosso local inicial, mas pode ser em cima ou em baixo. Depois recebemos a posição Y que é 100. Agora já temos um ponto de origem. Já sei que fica em cima. Da esquerda para a direita e de cima para baixo temos 125 e 100.

Bacana!

As próximas coordenadas vão desenhar. Então recebemos para onde vai o X = 350 (próximo a margem direita) e o Y = 300 (próximo a margem inferior).

Está feito nosso quadrado! E assim seguem as demais coordenadas.

Sempre parta das margens - X (esquerda) e Y (cima) neste caso.

Agoooora, vamos centralizar e vou pedir para que a cada alteração atualize sua página para ver essas mudanças ;-)

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

</canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    //Fundo
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

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

    //Olho esquerdo
    pincel.fillStyle = 'black';
    pincel.fillRect(166, 100, 90, 90);

    //Olho direito
    pincel.fillStyle = 'black';
    pincel.fillRect(326, 100, 90, 90);

    //Nariz
    pincel.fillStyle = 'black';
    pincel.fillRect(256, 190, 70, 100);

    //Boca lado esquerdo
    pincel.fillStyle = 'black';
    pincel.fillRect(216, 240, 40, 110);

    //Boca lado direito
    pincel.fillStyle = 'black';
    pincel.fillRect(326, 240, 40, 110);    
</script>

Podemos resumir, se achar interessante

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

</canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    //Fundo
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

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

    //Olhos
    pincel.fillStyle = 'black';
    pincel.fillRect(166, 100, 90, 90);
    pincel.fillRect(326, 100, 90, 90);

    //Nariz
    pincel.fillStyle = 'black';
    pincel.fillRect(256, 190, 70, 100);

    //Boca  
    pincel.fillStyle = 'black';
    pincel.fillRect(326, 240, 40, 110);
    pincel.fillRect(216, 240, 40, 110);    
</script>

Pegou a ideia, Shellen?

Não fique com dúvidas não!

Ah! Sobre criar um 600x400 ou de 350x300, vai depender das alterações que realizar em cada parâmetro. Você pode fazer um menor ou maior ainda, contanto que altere as outros valores de olhos, boca e etc...

Pode retornar que estaremos a disposição ;-)

Um abraço e até breve!