title: HTML5 canvas clearing and redrawing with for loop
body: <p>I'm playing around with JS and found a small HTML5 game tutorial that I thought would be cool to modify. (This is the outcome: <a href="http://www.lostdecadegames.com/demos...e_canvas_game/" rel="nofollow">http://www.lostdecadegames.com/demos...e_canvas_game/</a> )</p>
  
  <p>So I modified it just a little bit, letting for loop draw the background. The drawing itself succeed, but something is wrong with it.
  I found out that I must clear the canvas and redraw everything to each frame. I did it like this:</p>
  
  <pre><code>ctx.clearRect(0,0,canvas.width,canvas.height);
  </code></pre>
  
  <p>The outcome was that the clearing happened before the loop finished drawing the images.</p>
  
  <p>The cycle is:</p>
  
  <ul>
  <li>clear canvas</li>
  <li>for loop drawing the background tiles</li>
  <li>draw something else</li>
  </ul>
  
  <p>Somehow it doesn't output the background tiles...</p>
  
  <p>I included my modifications here:
  <a href="http://jsfiddle.net/swenn/6mWkU/" rel="nofollow">http://jsfiddle.net/swenn/6mWkU/</a></p>
  
  <p>What might be the problem?</p>