"Uma inofensiva flor" | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Oi gente, tinha feito um post bem escrito, com mais detalhes, mas ele teve algum problema na hora de ser enviado, então aqui vou só resumir e pedir um feedback do meu código =)

Queria dizer que aprendi muito com esse exercício, comecei a programar fazem poucos dias, mas estava seguindo um caminho muito linear dentro do curso. Com esse exercício eu me propus a fazer algo ligeiramente mais complexo pois com o que aprendi até aqui seria possível, mas insatisfeito com os resultados, isso me fez buscar, testar funções e coisas que ainda não tinha aprendido por ainda estar nessa etapa do curso.

Enfim um exercício que deveria ser feito em menos de 2 minutos mas acabou levando quase 2 dias até me satisfazer:

<style>
    body {
        background-color: rgb(26, 31, 32);
    }
</style>
<body onload="clickei()">
    <canvas width="600" height="400"></canvas>
    <br>
    <button onclick="zerar()">Zerar</button>
    <button onclick="clickei()">+1</button>
    <script>
        const tela = document.querySelector('canvas');
        const senoArr = [];
        const cosArr = [];
        const w = 600;
        const h = 400;
        const r = 90;
        let pincel = tela.getContext('2d');
        let petalas = 0;

        function zerar(){
            petalas = 0;
            clickei()
        }

        function clickei(){

        senoArr.length = 0;
        cosArr.length = 0;

        pincel.fillStyle = 'rgb(23, 59, 83)';
        pincel.fillRect(0, 0, 600, 400);
        pincel.fillStyle = 'rgb(6, 196, 22)';
        pincel.fillRect(w / 2 - 8, h / 2, 16, h / 2);

        function circulo(x, y, r2, cor) {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, r2, 0, 2 * Math.PI);
            pincel.fill();
        }

        function quantidadePetalas(petalas) {
            if (petalas <= 2) {
                r2 = 85;
            } else {
                r2 = 50 + 100 / petalas;
            }
        }

        for (i = 1; i <= petalas; i++) {
            senoArr.push(Math.sin(Math.PI / 180 * 360 / petalas * i));
            cosArr.push(Math.cos(Math.PI / 180 * 360 / petalas * i));
        }

        quantidadePetalas(petalas);

        for (i = 0; i < senoArr.length; i++) {
            catetoO = senoArr[i] * r;
            catetoA = cosArr[i] * r
            circulo(x = w / 2 + (catetoO), y = h / 2 + (catetoA), r2, `rgb(${randomN()}, ${randomN()}, 200)`);
        }

        function randomN(min, max) {
            min = Math.ceil(255);
            max = Math.floor(50);
            return Math.floor(Math.random() * (max - min)) + min;
        }
        circulo(w / 2, h / 2, r, 'rgb(255, 255, 255)');
        petalas++;
    }
    </script>
</body>

Espero que possam me dar um feedback sobre =)

*Me desculpem, o código não deve estar tão bom de ler, por ser novo em programação e (desculpe a sinceridade) preguiça de escrever declaracoesQueSaoMuitoGrandesPoremAutoExplicativas, porém como são poucas e elas possuem um sentido, espero não impactar tanto na compreensão.