title: Javascript FOR loop, "var i = 0", loop runs through as expected. However variable is reset to 0, and the loop never ends
body: <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" id="hypertext"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body onload="init();"&gt;
      &lt;div id="Canvas_Container"&gt;
          &lt;canvas id="Canvas_1"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript" src="index.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>var canvas_width = screen.availWidth;
  var canvas_height = screen.availHeight;
  var canvas_div = window.document.getElementById("Canvas_Container");
  canvas_div.innerHTML = "&lt;canvas id='Canvas_1' width='"+canvas_width+"' height='"+canvas_height+"'&gt;&lt;/canvas&gt;";
  var hypertext = document.getElementById("hypertext");
  var canvas = document.getElementById("Canvas_1");
  var context = canvas.getContext("2d");
  var init = function() {
      for (var i = 0; i &lt;= 2; i++) {
          var circle_x = Math.random() * canvas_width
          var circle_y = Math.random() * canvas_height
          var circle = {
          "x": circle_x,
          "y": circle_y,
          "radius": 5,
          "fill": "#000000"
          }
      }
      if (canvas.getContext) {
          context.beginPath();
          context.arc(circle.x,circle.y,circle.radius,0,2*Math.PI);
          context.fillStyle = circle.fill;
          context.fill();
          requestAnimationFrame(init);
      }
  console.log(i)
  }
  </code></pre>
  
  <p>As you can see I'm messing around with HTML5 canvas. I logged the variable earlier and I saw that the variable is reaching the limit set by the for loop and then for some odd reason it is resetting to 0, circles are being created infinitely because of this, and the browser crashes. I'm really scratching my head and wondering what's wrong with this one. Any help would be appreciated, I'm pretty new to this whole JavaScript thing. </p>