Triangulo dentro de um outro triangulo

Olá,

Inspirado no exercício 11 da aula 1 do curso de lógica de programação 2, tentei fazer algo mais psicodélico. Um código que desenharia um número 'x' de triangulos, onde 'x' seria escolhido pelo usuário. Cada triangulo ficaria dentro do ultimo desenhado e colocado de uma parecida com a do exercício, onde cada triangulo ficaria cada vez menor e no meio do ultimo. Não sei se consegui explicar kkkkk... segue o que consegui fazer até agora:

<meta charset="utf-8" />

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

</canvas>

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

    function desenharTriangulo (cor, eixoXinicial, eixoYinicial, largura, altura) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(eixoXinicial, eixoYinicial);
        pincel.lineTo(eixoXinicial, eixoYinicial+altura);
        pincel.lineTo(eixoXinicial+largura, eixoYinicial+altura);
        pincel.fill();
    }

    function gerar_cor(opacidade = 1) {
        let r = Math.random() * 255;
        let g = Math.random() * 255;
        let b = Math.random() * 255;

        return `rgba(${r}, ${g}, ${b}, ${opacidade})`;
    }


    var tamanho = parseInt(prompt("Qual o tamanho dos catetos?"))
    var cateto = Math.sqrt(tamanho);

    var quantidadeTriangulos = parseInt(prompt("Quantos triangulos?"));
    var pontoInicial = 50;

    desenharTriangulo(gerar_cor(), pontoInicial, pontoInicial, cateto, cateto);

    for (var index = 1; index < quantidadeTriangulos; index++) {

        desenharTriangulo(gerar_cor(), pontoInicial+(10*index), pontoInicial+(10*index), tamanho/index, tamanho/index);
    }

</script>