desafio creeper.

Tentei resolver fazendo desenho sem consultar as medidas e fazendo com uma proporção pouco maior e meu código ficou assim.

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

    <script>
    // criar a variavel para chamar a tela

    var fundo = document.querySelector("canvas");
    var pincel = fundo.getContext("2d"); // crio uma var *** que recebe os paramento da fundo e atribui com .getContext o modelo de desenho


    // criando o corpo do Creeper

    pincel.fillStyle = "green"; // criando primeiro a cor 
    pincel.fillRect(50, 60, 550, 320); // criando o modelo retangulo com as cordenadas a serem pintadas

    // criando agora os olhos 

    pincel.fillStyle = "black";
    pincel.fillRect(100, 70, 150, 120);

    pincel.fillStyle = "black";
    pincel.fillRect(350, 70, 150, 120);

    pincel.fillStyle = "black";
    pincel.fillRect(220, 180, 150, 100); // (x horizontal direção ,y vertical direcão, largura , altura )

    pincel.fillStyle = "black";
    pincel.fillRect(180, 230, 70, 135);

    pincel.fillStyle = "black";
    pincel.fillRect(340, 230, 70, 135);



    </script>

ao comparar com o exercício percebi que meu código ficou mais trabalhoso, porem no resultado saiu no que tratava a tarefa.