esquadro2.html

<!-- esquadro.html -->

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

<script>
    function desenhasquadro(cor, x, y, z){

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

        pincel.fillStyle=cor;
        pincel.beginPath();

        if (cor == "black"){
            pincel.moveTo(x,y);
            pincel.lineTo(x,z);
            pincel.lineTo(z,z);   
        } else {
            pincel.moveTo(x,z);
            pincel.lineTo(x,z*2);
            pincel.lineTo(x+z,z*2);   
        }
        pincel.fill();    
    }

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

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

</script>