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

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



    pincel.fillStyle = "blue";  
    pincel.fillRect(0,0,500,500); 

    pincel.fillStyle = "yellow"; 
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle = "black";

    //pincel.rotate(45*Math.PI/180)
    pincel.beginPath();
    pincel.moveTo(175, 100);
    pincel.lineTo(350, 100);
    pincel.lineTo(350, 275);
    pincel.fill();

    pincel.fillStyle = "Darkgrey"; 
    pincel.beginPath();
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275, 350);
    pincel.fill();

</script>

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

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



    pincel.fillStyle = "red";  
    pincel.fillRect(0,0,500,500); 

    pincel.fillStyle = "yellow"; 
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

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

    pincel.fillStyle = "black";

    //pincel.rotate(45*Math.PI/180)
    pincel.beginPath();
    pincel.moveTo(175, 100);
    pincel.lineTo(350, 100);
    pincel.lineTo(350, 275);
    pincel.fill();

    pincel.fillStyle = "Darkgrey"; 
    pincel.beginPath();
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275, 350);
    pincel.fill();

</script>