title: Spawning sprites with for loops
body: <p>I'm having trouble spawning multiples of the same sprite in random locations of the canvas. The var = obstacle is the one I'm talking about. We are trying to do this with a for loop. Please help?</p>
  
  <p>Jsbin link : <a href="http://jsbin.com/warurijuji/2/edit" rel="nofollow">http://jsbin.com/warurijuji/2/edit</a></p>
  
  <p>code thats not working:</p>
  
  <pre><code>//Uploading obstacle image
  var obstacle = new Image();
  obstacle.src = "http://2.bp.blogspot.com/-dE5my5trgGU/TyQ4ULWlXhI/AAAAAAAABTE/lD1Al2Vql1c/s320/cartoon+pineapple+clipart.png";
  
  //for loop for spawning it
  function drawObstacle() {
  
    for (i = 0; i &lt;= 50; i++) {
  
            var x1 = Math.floor(Math.random() * 299);
            var y2 = Math.floor(Math.random() * 299);
  
            context.fillStyle = "#EEEEEE";
  
            if (x1 &gt; 40 &amp;&amp; y2 &gt; 40) {
  
              context.beginPath();
              context.arc(x1, y2, 3, 0, Math.PI * 2, true);
              context.closePath();
              context.fill();
            } else--i;
          }
    }
  </code></pre>