<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flor</title>
</head>
<body>
<canvas class = "lienzo" width="600px" height="400px"></canvas>
<script>
const canvas = document.querySelector(".lienzo");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "lightgrey";
ctx.fillRect(0,0,600,400);
function drawCircle (x, y, radio, color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radio, 0, 2*3.14);
ctx.fill();
}
function drawFlower(x,y){
drawCircle(x,y,25,"#DAF7A6");
drawCircle(x+50,y,25,"#FAA0A0");
drawCircle(x-50,y,25,"#DE3163");
drawCircle(x,y-50,25,"#702963");
drawCircle(x,y+50,25,"#E97451");
}
drawFlower(300,200);
drawFlower(400,250);
drawFlower(100,100);
</script>
</body>
</html>
