Dimensões diferentes

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


<script>

var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");



    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0, 0, 150, 300);


    pincel.fillStyle = "black"; //olho1
    pincel.fillRect(30, 40, 30, 30);

    pincel.fillStyle = "black"; //olho2
    pincel.fillRect(90, 40, 30, 30);

    pincel.fillStyle = "black";//nariz
    pincel.fillRect(60, 70, 30, 40);

    pincel.fillStyle = "black";//boca5
    pincel.fillRect(90, 90, 20, 80);

    pincel.fillStyle = "black";//boca6
    pincel.fillRect(40, 90, 20, 80);






</script>

Olá, André.

Como aluna, acho que isso não é um problema, você só customizou o código do seu jeito, apenas ficará desproporcional, já que você não seguiu as medidas indicadas e diminuiu os tamanhos de forma não proporcional.

Por exemplo, a cabeça original é 350, 300, você diminuiu para uma cabeça de 150, 300, ou seja, o eixo X teve uma redução de 200 pixels, enquanto o eixo Y continuou o mesmo.

Uma alternativa seria diminuir todos os valores em porcentagem, por exemplo, diminuir 10% do eixo X e do eixo Y da cabeça, dos eixos dos olhos, bocas e de todos os elementos dessa imagem.

A impressão que seu creeper passa em relação ao original é que ele é mais "esticado", tem a altura da boca maior, etc.

Com relação a não estar centralizado, acho que não tem problema, também fiz dessa forma, porque achei mais fácil para colocar os valores das coordenadas dos elementos.

Espero ter ajudado um pouco :)