diseñando escuadra | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Con este tuve algunas complicaciones en el color, hasta me di cuenta que tenía que declararlo antes de la apertura del dibujo...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Escuadra</title>
</head>
<body>
    <canvas id="canvas" width="600" height="400" style="border:1px solid;border-color:black;">
    </canvas>


    <script type="text/javascript" src="escuadra.js">
    function draw(){

    var pantalla = document.getElementById("canvas");

        if(pantalla.getContext){
            var pincel = pantalla.getContext("2d");

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

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

        }
    }

    draw();

    </script>
</body>
</html>