Creeper

<canvas width="800" height="800"></canvas>
<script >
    var screen = document.querySelector("canvas");
    var pincel = screen.getContext("2d");

    //definimos el primer color 1
    pincel.fillStyle = "#188218";
    pincel.fillRect(0,0,800,800);

    //rectangulo 1 "ojo"
    pincel.fillStyle = "#111111";
    pincel.fillRect(100,100,200,200);


    //rectangulo 2 "ojo 2"
    pincel.fillStyle = "#111111";
    pincel.fillRect(500,100,200,200);

    //boca 
    pincel.fillStyle = "#111111";
    pincel.fillRect(300,300,200,300);

    pincel.fillStyle = "#111111";
    pincel.fillRect(200,400,100,300);

    pincel.fillStyle = "#111111";
    pincel.fillRect(500,400,100,300);

     //parte superior color 2
    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(100,0,100,100);

    //COLOR 3 
    pincel.fillStyle = "#22B022";
    pincel.fillRect(200,0,100,100);

    //COLOR 4
    pincel.fillStyle = "#0B680B";
    pincel.fillRect(300,0,100,100);

    pincel.fillStyle = "#22B022";
    pincel.fillRect(500,0,100,100);

    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(600,0,100,100);

    pincel.fillStyle = "#0B680B";
    pincel.fillRect(700,0,100,100);

    pincel.fillStyle = "#22B022";
    pincel.fillRect(0,100,100,100);
    //2
    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(300,100,100,100);
    //3
    pincel.fillStyle = "#22B022";
    pincel.fillRect(400,100,100,100);

    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(700,100,100,100);

    //2
    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(0,300,100,100);

    //3
    pincel.fillStyle = "#22B022";
    pincel.fillRect(100,300,100,100);

    pincel.fillStyle = "#0B680B";
    pincel.fillRect(300,200,100,100);        

    pincel.fillStyle = "#0B680B";
    pincel.fillRect(500,300,100,100);
    //2
    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(600,300,100,100);

    //3
    pincel.fillStyle = "#22B022";
    pincel.fillRect(700,300,100,100);

    //3
    pincel.fillStyle = "#22B022";
    pincel.fillRect(0,400,100,100);

    pincel.fillStyle = "#0B680B";
    pincel.fillRect(100,400,100,100);

    //3
    pincel.fillStyle = "#22B022";
    pincel.fillRect(600,400,100,100);

    pincel.fillStyle = "#0B680B";
    pincel.fillRect(0,500,100,100);

    pincel.fillStyle = "#0B680B";
    pincel.fillRect(600,500,100,100);

    pincel.fillStyle = "#22B022";
    pincel.fillRect(700,500,100,100);

    pincel.fillStyle = "#22B022";
    pincel.fillRect(0,600,100,100);

    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(100,600,100,100);

    pincel.fillStyle = "#22B022";
    pincel.fillRect(300,600,100,100);

    pincel.fillStyle = "#0B680B";
    pincel.fillRect(400,600,100,100);

    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(700,600,100,100);


    pincel.fillStyle = "#0B680B";
    pincel.fillRect(0,700,100,100);

    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(200,700,100,100);


    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(400,700,100,100);

    pincel.fillStyle = "#22B022";
    pincel.fillRect(500,700,100,100);

    pincel.fillStyle = "#9CFF9C";
    pincel.fillRect(600,700,100,100);


</script>

queda como resultado: