borre el primero de la bandera por que lo sobreescribi xD

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


<script>

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



    pincel.fillStyle = "blue";   //propiedad
    pincel.beginPath();        //
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400,400);
    pincel.fill();
   

    pincel.fillStyle = "red";   //propiedad
    pincel.beginPath();
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275,350);
    pincel.fill();
</script>
---------------------------------------------
<canvas width="600" height="400">
</canvas>

<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");


pincel.fillStyle = "lightgrey"  //propiedad
pincel.fillRect(0,0,600,400);  //funcion
    
pincel.fillStyle = "darkgreen"  //propiedad
pincel.fillRect(125,50,350,300);  //funcion

pincel.fillStyle = "darkgreen"  //propiedad
pincel.fillRect(175,100,90,90);  //funcion

pincel.fillStyle = "black"  //propiedad
pincel.fillRect(335,100,90,90);  //funcion

pincel.fillStyle = "black"  //propiedad
pincel.fillRect(225,240,40110);  //funcion

pincel.fillStyle = "black"  //propiedad
pincel.fillRect(335,240,40,110);  //funcion
</script>