Esquadro - Resposta | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<!DOCTYPE html>
<html lang="pt-br">
<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>Esquadro</title>
</head>
<body style="background-color:white">
    <canvas width='600' height="400"></canvas>

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

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

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

    </script>

</body>
</html>