title: Issue on Drawing Multiple Circles on HTML5 Canvas
body: <p>Can you please take a <a href="http://jsfiddle.net/Behseini/56jhq/1/" rel="noreferrer">look at this</a> demo and let me know how I can draw multiple circles in a canvas with different coordinate  without repeating bunch of codes?</p>
  
  <p>As you can see on Demo and following code</p>
  
  <pre><code>var ctx = $('#canvas')[0].getContext("2d");
  ctx.fillStyle = "#00A308";
  ctx.beginPath();
  ctx.arc(150, 50, 5, 0, Math.PI * 2, true);
  ctx.arc(20, 85, 5, 0, Math.PI * 2, true);
  ctx.arc(160, 95, 5, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
  </code></pre>
  
  <p>I tried to have them under <code>ctx</code> but it is not correct so I tried to use for loop to create 50 points but I have issue on repeating and adding code like ctx.fill(); for all of them.
  Can you please let me know how I can fix this?</p>
  
  <p>Thanks</p>