index.html

<html>

<head>
</head>

<body>
    <center>
        <h1>Meu primeiro Aplicativo</h1>

        <p>
            Quantidade de repetições:
            <input type="number" id="niveis_triangulo">
            <button type="button" onclick="gerar_triangulos()">Enviar</button>
        </p>

        <canvas id="primeiro_canvas" width="500" height="500" style="border:1px solid"></canvas>

        <script>
            function triangulo(tamanho) {
                meu_canvas.moveTo(tamanho / 2, 0);
                meu_canvas.lineTo(0, tamanho);
                meu_canvas.lineTo(tamanho, tamanho);
                meu_canvas.lineTo(tamanho / 2, 0);
            }

            function limpar_canvas() {
                meu_canvas.clearRect(0, 0, largura - 1, largura - 1);
                meu_canvas.beginPath();
            }

            function gerar_triangulos() {

                limpar_canvas();
                var repeticoes = document.getElementById("niveis_triangulo").value;

                for (var i = 1; i < repeticoes; i++) {
                    if (i == 1 || i % 3 == 0) {
                        triangulo(largura / i);
                    } else {
                        triangulo(largura);
                    }
                }
                meu_canvas.strokeStyle = 'red';
                meu_canvas.stroke();
            }

            var meu_canvas = document.getElementById("primeiro_canvas").getContext("2d");
            var largura = document.getElementById("primeiro_canvas").width; //500

            document.getElementById("niveis_triangulo").value = 15;

            gerar_triangulos();

        </script>

        <p>
            <a href="sierpinski.html"><button type="button">Sierpinski</button></a>
            <a href="mandelbrot.html"><button type="button">Mandelbrot</button></a>
        </p>
    </center>
</body>

</html>