Meu código está funcionando, mas eu queria saber como faço para essa flor que desenhei uma vez se repetir mais vezes, para todos os lados ( direita esquerda, cima baixo), sem ter que ficar declarando as posições de x e y. Já tentei usando o for/while, mas não consegui. :/
<canvas width="600" height="400"></canvas>
<script>
let canva = document.querySelector ("canvas");
let pincel = canva.getContext ("2d");
pincel.fillStyle = "lightblue";
pincel.fillRect (0, 0, 600, 400);
function desenhaCirculo (xCirculo, yCirculo, raio, cor){
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc (xCirculo, yCirculo, raio, 0, 2*Math.PI);
pincel.fill();
}
function desenhaFlor (){
desenhaCirculo (300, 200, 10, "yellow"); //centro
desenhaCirculo (280, 200, 10, "purple"); //pétala esquerda
desenhaCirculo (320, 200, 10, "purple"); //pétala direita
desenhaCirculo (300, 180, 10, "purple"); //pétala superior
desenhaCirculo (300, 220, 10, "purple"); //pétala inferior
}
desenhaFlor ();
</script>