Outra resolução para creeper.html

<meta charset="UTF-8">

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

</canvas>

<script>

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

    pincel.fillStyle = "darkgreen"; 
    pincel.fillRect(125, 50, 350, 300); //Retângulo 1

    pincel.fillStyle = "black";
    pincel.fillRect(175, 110, 90, 90); //Retângulo 2
    pincel.fillRect(335, 110, 90, 90); //Retângulo 3
    pincel.fillRect(265, 200, 70, 100); //Retângulo 4
    pincel.fillRect(225, 240, 40, 110); //Retângulo 5
    pincel.fillRect(335, 240, 40, 110); //Retângulo 6

    /*
    OBS
            Eixo X | Eixo Y
    Canvas:   600  |  400            
    Ret 1:       350  |  300
    Ret 2:        90  |  90
    Ret 3:        90  |  90
    Ret 4:        70  |  100
    Ret 5:        40  |  110
    Ret 6:        40  |  110

    Ret 1 origem:     X = (600 - 350) / 2 = 125
                       Y = (400 - 300) / 2 = 50

    Ret 2 origem:     X = (125 + (350 / 2) - (70 / 2) - 90) = 175
                       Y = (50 + (300 / 2) - 90) = 110

    Ret 3 origem:     X = 175 + 90 + 70 = 335
                       Y = 110

    Ret 4 origem:     X = 175 + 90 = 265
                       Y = 400 / 2 = 200

    Ret 5 origem:     X = 265 - 40 = 225
                       Y = 50 + 300 - 110 = 240

    Ret 6 origem:     X = 265 + 70 = 335
                       Y = 240
    */
</script>