Pregunta URGENTE

Hola, tu código tiene un pequeñísimo error y es que debes recordar que Javascript diferencia entre mayúsculas y minúsculas. Declaraste la variable "y" como minúscula y luego la usaste en mayúscula:

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

<script>
 var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgreen";
    pincel.fillRect(0,0,900,600); 

   function dibujarCirculo(x,y,radio,color){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*3.14);
        pincel.fill();
    }
    function dibujarFlor(x,y){
        dibujarCirculo(x-20,y-20,20,"green");
        dibujarCirculo(x+20,y-20,20,"green");
        dibujarCirculo(x-20,y+20,20,"green");
        dibujarCirculo(x+20,y+20,20,"green");
        dibujarCirculo(x-20,y,10,"Orange");
        dibujarCirculo(x+20,y,10,"Orange");
        dibujarCirculo(x,y-20,10,"Orange");
        dibujarCirculo(x,y+20,10,"Orange");
        dibujarCirculo(x-10,y-10,10,"Yellow");
        dibujarCirculo(x+10,y-10,10,"Yellow");
        dibujarCirculo(x-10,y+10,10,"Yellow");
        dibujarCirculo(x+10,y+10,10,"Yellow");
        dibujarCirculo(x,y,10,"red");
    }

/*Solamente hice modificaciones en este segmento*/

    //Para que haya más simetría inicié x, y en 50 y también puse los incrementos en 100 para que no quedaran separadas las flores.
    for (var x=50; x<900; x=x+100){ 
        for(var y=50; y<600; y=y+100){ //Acá el error en el uso de mayúsculas y minúsculas
        dibujarFlor(x,y);
        }
    }

</script> 

oops! muchas gracias. Debo tener en cuenta esos pequeños errores.