title: Global object declared in function not accessible by other functions
body: <p>In this code <code>window.onload</code> is used to delay the execution of the script to prevent references to the canvas occurring before the canvas is loaded. Withing <code>start()</code> the code <code>map.fillStyle="CCFFEE</code> runs as expected. I did not use <code>var</code> when declaring the <code>map</code> variable so as to make global to be referenced by other functions such as <code>draw()</code> and <code>start()</code>. However, for some reason <code>start()</code> accepts the variable as is, and uses it as expected, drawing the rectangle (in this case the background) to the screen while <code>draw()</code> throws an error when trying to use the variable. Error: <code>Uncaught ReferenceError: map is not defined</code>. This also occurs in the <code>update()</code> function as well as in the global scope outside of any functions. This has been tested with <code>console.log("Map: " + map);</code>. I hope that was concise enough for you to help.</p>
  
  <pre><code>window.onload=function() {
      init();
  }
  
  var fps = 30;
  var now;
  var then = Date.now();
  var interval = 1000/fps;
  var delta;
  
  function Player(x, y, w, h) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
  }
  
  function Collider(x, y, w, h) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
  }
  
  function init() {
      canvas = document.getElementById('map');
      map = canvas.getContext('2d');
      start();
  }
  
  function start() {
      //Player Object
      player1 = new Player(gameMap.w / 3, (gameMap.h / 7) * 5, 30, 30);
  
      //Player Collider Object
      p1Collider = new Collider(player1.x - 15, player1.y - 5, player1.w + 30, player1.h + 130);
  
      //fillStyle and fillRect work here
      map.fillStyle="#CCFFEE";
      map.fillRect(0, 0, 1280,800);
  }
  
  function update(){
      //Error happens here too
  }
  
  function draw() {
      requestAnimationFrame(draw);
      now = Date.now();
      delta = now - then
  
      if (delta &gt; interval) {
          then = now - (delta % interval);
      }
  
      //Character Collider
      //fillStyle and fillRect do not work here
      //Throws error:  Uncaught ReferenceError: map is not defined
      map.fillStyle="#CCFFEE";
      map.fillRect(p1Collider.x, p1Collider.y, p1Collider.w, p1Collider.h);
  }
  
  update();
  draw;
  </code></pre>