Solucion Flor con cambio de diametro

Mi solucion agregando la posibilidad de cambiar el diametro de los circulos es:

<meta charset="utf-8">
<title>Flor Canvas</title>
<label>Radio: </label>
<input type="number" min="1" max="50" value=20>
<button>Generar Flor</button>
<canvas width="600" height="400"></canvas>

<script>

    function iniciarCanvas(){
        pincel.clearRect(0, 0, 600, 400); 
        pincel.fillStyle = "lightgray";
        pincel.fillRect(0, 0, 600, 400);
    }

    function dibujarCirculo(x, y, radio, color) {

        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*3.14);
        pincel.fill();
    }



    function dibujarFlor(radio){

        iniciarCanvas();
        let center_x=300;
        let center_y=200;
        //let radio=20;
        let diametro= radio*2;
        console.log("El radio de circulos es "+radio);
        dibujarCirculo(center_x,center_y,radio,"red");//centro

        dibujarCirculo(center_x-diametro,center_y,radio,"orange");
        dibujarCirculo(center_x+diametro,center_y,radio,"black");
        dibujarCirculo(center_x,center_y-diametro,radio,"yellow");
        dibujarCirculo(center_x,center_y+diametro,radio,"blue");            
    }

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    iniciarCanvas();  

    let radio= document.querySelector("input");
    dibujarFlor(radio.value);

    let btnGenerar= document.querySelector("button");
    btnGenerar.onclick=function(){dibujarFlor(radio.value)}

</script>