<canvas width="600" height="400"></canvas>
<script>
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*3.14);
pincel.fill();
}
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaFlor(x, y) {
desenhaCirculo(x, y, 25, 'red'); /*centro 300, 200*/
desenhaCirculo(x + 50, 200, 25, 'black'); /*direito*/
desenhaCirculo(x - 50, 200, 25, 'orange'); /*esquerdo*/
desenhaCirculo(300, y - 50, 25, 'yellow'); /*cima*/
desenhaCirculo(300, y + 50, 25, 'blue'); /*baixo*/
}
desenhaFlor(300, 200);
</script>
Teria como melhorar ? Daria pra usar um for ou um while ? Se tiver como, vou dar uma pensada em como fazer.