Tentei fazer uma função para diistribuir estrelas

Boa tarde, tentei frustradamente criar uma função que cria estrelas (até ai consegui), eu estou tentando fazer uma estrutura de repetição que crie 26 estrelas automaticamente. Para isso estava pensando em usar a estrutura "for", eu iria fazer ela ficar repetindo a função de criar estrelas até a quantidade igual a 26, criando regras de enquanto estrelas for menor que 26 eu iria fazer incremento com estrelas++ (acho que até ai tudo bem tmb), o bixo pega é para criar essas 26 estrelas no espaço dentro do eixo 264.5y ao 332.5y e do 200x ao 232.5x dentro dos limites do radius 2, 0, 2 * 3.14 (na minha cabeça isso representaria a metade de baixo do circulo azul da bandeira). O que eu queria era criar uma função que crie 26 estrelas na parte inferior do circulo azul da bandeira com regras para não serem criadas estrelas em cima da outra ou colada. No curso anterior de lógica aprendemos fazer isso com numeros, para eles não se repetirem, mas e com desenhos, como faz?

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

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

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(10, 200);
    pincel.lineTo(300, 10);
    pincel.lineTo(300, 390);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(590, 200);
    pincel.lineTo(300, 10);
    pincel.lineTo(300, 390);
    pincel.fill();

    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(300, 200, 130, 0, 2 * 3.14);
    pincel.fill();




    function estrelas() {


        pincel.fillStyle = 'white';
        pincel.beginPath();
        pincel.arc(300, 200, 2, 0, 2 * 3.14);
        pincel.fill();



    }

    estrelas()
</script>