en el ejercicio nos dan la funcion ya hecha solo faltaba darle las cordenadas de cada circulo y por su puesto el color partiendo de la vase en (x = 300) y en (y = 200); en base la cordenada a la flor del media hice las demas en orden a las manesillas del relog y teniendo en cuenta que tiene un radio de 30 pixeles entonces empecemos con la amarilla que esta ubicada en el centro igual que la roja por lo que su ubicacion seria de la siguiente manera (x=300) y nos desplazamos en "y" 60 pixeles hacia arriba (y = 140), de esta forma cada vez que posicionemos los circulos tienes que aunmentarle o restarle 60 pixeles dependiendo de la posicion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flor</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "skyblue";
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,30,"red");
dibujarCirculo(300,140,30,"yellow");
dibujarCirculo(360,200,30,"black");
dibujarCirculo(300,260,30,"blue");
dibujarCirculo(240,200,30,"orange");
</script>
</body>
</html>
