Desenhando a flor, e escolhendo o seu tamanho

Olá. Este post mostra uma modificação que fiz no programa para que o usuário interaja.

Eu executei o exercício 'Uma inofensiva flor' com a interação com o usuário. Ele é quem escolhe o tamanho da flor desenhada.

<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();    
    }

    function desenhaFlor(x, y, raio) {

    desenhaCirculo(x, y, raio, 'red');
    desenhaCirculo(x-(raio*2), y, raio, 'orange');
    desenhaCirculo(x, y-(raio*2), raio, 'yellow');
    desenhaCirculo(x, y+(raio*2), raio, 'blue');
    desenhaCirculo(x+(raio*2), y, raio, 'black');
    }

    desenhaFlor(300, 200, parseInt(prompt("Digite o raio da sua flor.")));

</script>