Solução código - DesenhaCirculo

Ola galera,

Segue uma solução bem legal aproveitando o conteúdo do módulo I e II do curso

O código deixa bem livre para os testes

Espero que ajude, pois deu trabalho rsrsrsr

<meta charset="UTF-8">

    Coordenada X: <input id="posicaoX" value = 300><br>
    Coordenada Y: <input id="posicaoY" value = 200><br>
    Raio: <input id="raio" value = 10><br>
    <button id="gera">Desenha flor</button><br>
    <canvas id="quadro" width="600" height="400"></canvas>

<script>
    var posicaoX = document.querySelector('#posicaoX');
    var posicaoY = document.querySelector('#posicaoY');
    var raio = document.querySelector('#raio');

    var quadro = document.querySelector('#quadro');
    var pincel = quadro.getContext('2d');

    function limparQuadro() {
        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 * Math.PI);
        pincel.fill();
    }

    function desenhaFlor(x, y, raio){
        var d = (raio*2);  // diamentro do circulo
        desenhaCirculo(x, y, raio, 'red');
        desenhaCirculo(x, (y-d), raio, 'yellow');
        desenhaCirculo(x, (y+d), raio, 'blue');
        desenhaCirculo((x-d), y, raio, 'orange');
        desenhaCirculo((x+d), y, raio, 'black');
    }

    function flor() {
        limparQuadro();
        var x = parseInt(posicaoX.value);// coordenada eixo x
        var y = parseInt(posicaoY.value);// coordenada eixo y
        var r = parseInt(raio.value);// raio do circulo
        desenhaFlor(x, y, r);
    }

    var gera = document.querySelector("#gera");
    gera.onclick = flor;

</script>