Meu creeper... tem 2 códigos... como pedido e como seria usando o outro comando...

fiz com os 2 modos aprendidos

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

<script>

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

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

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

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

    pincel.fillStyle = "black"
    pincel.fillRect(175, 375, 75, 375);

    pincel.fillStyle = "black"
    pincel.fillRect(350, 375, 75, 375);

    pincel.fillStyle = "black"
    pincel.fillRect(250, 300, 100, 200);




/*
    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(100, 150);
    pincel.lineTo(100, 300);
    pincel.lineTo(250, 300);
    pincel.lineTo(250, 150);
    pincel.fill();

    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(350, 150);
    pincel.lineTo(350, 300);
    pincel.lineTo(500, 300);
    pincel.lineTo(500, 150);
    pincel.fill();

    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(175, 375);
    pincel.lineTo(175, 600);
    pincel.lineTo(250, 600);
    pincel.lineTo(250, 375);
    pincel.fill();

    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(350, 375);
    pincel.lineTo(350, 600);
    pincel.lineTo(425, 600);
    pincel.lineTo(425, 375);
    pincel.fill();

    pincel.fillStyle = "black"
    pincel.beginPath();
    pincel.moveTo(250, 300);
    pincel.lineTo(250, 500);
    pincel.lineTo(350, 500);
    pincel.lineTo(350, 300);
    pincel.fill();
*/
</script>