Hola, por el momento realicé dos flores, trabajando con el cambio de posiciones, de colores y de tamaño.
Iré mejorando.
Gracias.
<h1>Diseñando flores</h1>
<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();
}
/*
dibujarCirculo(300, 200, 50, 'blue');
dibujarCirculo(200, 200, 50, 'purple');
dibujarCirculo(400, 200, 50, 'orange');
dibujarCirculo(300, 100, 50, 'black');
dibujarCirculo(300, 300, 50, 'red')
Para dejar más prolija el código, ubicar otra función que englobe las cinco llamadas, es decir, la función dibujar circulo llamada por una sola función.
No requiere parámetros, sólo sirve para llamar
Nota: Cambio número para denotar la importancia de definir los parámetros usados en los argumentos.*/
function dibujarFlorGrande() {
dibujarCirculo(300, 200, 30, 'blue');
dibujarCirculo(300, 140, 30, 'black');
dibujarCirculo(300, 260, 30, 'red')
dibujarCirculo(240, 200, 30, 'violet');
dibujarCirculo(360, 200, 30, 'orange');
}
function dibujarFlorPequeña() {
dibujarCirculo(500, 300, 16, 'brown');
dibujarCirculo(500, 268, 16, 'royalblue');
dibujarCirculo(500, 332, 16, 'gray')
dibujarCirculo(468, 300, 16, 'aquamarine');
dibujarCirculo(532, 300, 16, 'orange');
}
dibujarFlorGrande();
dibujarFlorPequeña();
</script>