title: Draw a flower using canvas and a loop
body: <p>I'm trying to draw this 
  <a href="https://i.stack.imgur.com/KmglX.png" rel="nofollow noreferrer">flower</a> using a loop in canvas. I'm confused where to start. Do i draw the petals first? Do i transform them after to get all 5 petals. This is what I have so far for a 500 x 500 canvas. </p>
  
  <pre><code>var canvas = document.getElementById('flowerCanvas');
  var ctx = canvas.getContext('2d');
  
  var radius = 20;
  var petals =  5;
  
  ctx.beginPath();
  ctx.arc(250, 250, radius, 0, 2*Math.PI);
  ctx.fillStyle = "black";
  ctx.fill();
  ctx.save();
  
  ctx.translate(250,250);
  
  
  for(var i = 0; i &lt; 5; i++){
    ctx.lineTo(200,0);
  
    ctx.stroke();
  }
  
  ctx.restore();
  </code></pre>