Jardim de Flores aleatórias

Fiz um jardim com flores coloridas, que são Aleatoriamente formadas

<canvas width="620" height="420"></canvas>

<script >

    var tela = document.querySelector('canvas')
    var pincel = tela.getContext('2d')

    pincel.fillStyle = 'lightgray'
    pincel.fillRect (0,0,620,420)

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

        pincel.fillStyle = cor
        pincel.beginPath()
        pincel.arc(x, y, raio, 0, 2*3.14)
        pincel.fill()
    }
function cor(){
      var coresDasFlores=["red","blue", "yellow", "black", "orange","green","pink" ];
      var corAleatoria=Math.floor(Math.random() * coresDasFlores.length);
      var corcirculo=coresDasFlores[corAleatoria];
      return corcirculo;
    }
    console.log(cor());

    function flor(x, y) {
        circulo(x,y,10,cor())
        circulo(x,y+20,10,cor())
        circulo(x,y-20,10,cor())
        circulo(x+20,y,10,cor())
        circulo(x-20,y,10,cor())
    }

    var x = 30
    var y = 30

    while (x <= 630 && y<= 420){

        flor (x,y)
        x = x + 40

        if (x>=630){
            x = 30
            y = y + 60
        }
    }

</script>