Diseñando una flor - Juegos y Animaciones - Padron Base Aleatoria

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    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(x,y,r) {
     dibujarCirculo(x,y,r, "red");
    dibujarCirculo(x-(2*r),y,r, "orange");  //(x-(2r),y,r)
    dibujarCirculo(x+(2*r),y,r, "black");   //(x+(2r),y,r)
    dibujarCirculo(x,y-(2*r),r, "yellow");  //(x,(y-(2r),r)
    dibujarCirculo(x,y+(2*r),r, "blue");    //(x,(y+(2r),r))
  }

    x = (Math.random()*300);
    y = (Math.random()*200);
    r = (Math.random()*50);

    dibujarFlor(x,y,r);
    dibujarFlor(2*x,3*y,r);

Sorprende las infinitas posibilidades que existen con lo poco que hemos aprendido hasta ahora. Mi código lleva en la formula el padrón base para cualquier medida de plano (x,y) con cualquier radio (r) y además pueden ser números aleatorios. Excelente!