title: Randomly spawn one by one object in canvas
body: <p>How do I generate objects one by one on a map, without them occupying the same space or overlapping on a HTML5 Canvas?</p>
  
  <p>So, circle is randomly generated on screen and lasts few secs there, and then new circle generates. They can generate even before the first circle is "destroyed" but not at the same time.</p>
  
  <p>This is what I have now: <a href="http://jsfiddle.net/SamuraiFox/p9sDB/" rel="nofollow">http://jsfiddle.net/SamuraiFox/p9sDB/</a></p>
  
  <pre><code>&lt;div id="circle" onclick="resize()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>--> I need this animation to play when circle is spawned and it should play without onclick...so automatically.</p>