creeper

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

<script>
    let lienzo = document.querySelector("canvas");
    let context =lienzo.getContext("2d");
    context.fillStyle ="darkgreen";
                //   xi yi xf  yf
    context.fillRect(125,0,350,300);

    context.fillStyle ="black";
    context.fillRect(175,60,90,90);

    context.fillStyle ="black";
    context.fillRect(335,60,90,90);

    context.fillStyle ="black";
    context.fillRect(265, 150, 70, 100);

    context.fillStyle ="black";
    context.fillRect(225, 190, 40, 110);

    context.fillStyle ="black";
    context.fillRect(335, 190, 40, 110);


</script>

al comienzo me parecia un poco complejo pero, despues de una breve investgacion lo pude y entendi