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

<!DOCTYPE html>
<html lang="es">

<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>Document</title>
</head>

<body>
    <center><canvas id="myCanvas" width="600px" height="400px" style="border: 1px solid #000;"></canvas></center>

    <script>
        let canvas = document.querySelector("#myCanvas");
        let ctx = canvas.getContext("2d");

        function triangleA(x, y, color) {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.moveTo(x, y);
            ctx.lineTo(50, 400);
            ctx.lineTo(400, 400);
            ctx.fill();
        }

        function triangleB(x, y, color) {
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.moveTo(x, y);
            ctx.lineTo(100, 350);
            ctx.lineTo(275, 350);
            ctx.fill();
        }

        triangleA(50, 50, "#000")
        triangleB(100, 175, "#FFF")
    </script>
</body>

</html>