Para completar o desafio, eu primeiro defini um raio de 20 para cada círculo. Logo em seguida, defini a posição do círculo laranja no eixo X com base na posição (300x200) do círculo central (vermelho). Então, eu só precisei diminuir 300-40 (40 = espaço que dois círculos ocupam, uma vez que meu raio foi definido por 20) para encontrar o X do círculo laranja, que é de 260. Fiz a mesma coisa para o preto, só que ao invés de diminuir, aumentei em 300 +40 = 340.

Repeti a mesma lógica para o eixo y e o resultado vocês conseguem ver no código que disponibilizei aqui:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();

    }

    /* base horizontal da flor*/

      desenhaCirculo(260,200,20, 'orange');  
      desenhaCirculo(300,200, 20, 'red');
      desenhaCirculo(340,200,20, 'black');

    /* base vertical da flor */

      desenhaCirculo(300, 160, 20, 'yellow');
      desenhaCirculo(300, 240,20, 'blue');

</script>

Espero ter ajudado. Abraço.