title: Javascript module pattern and global variable
body: <p>Seems simple enough, but I cannot get it to work:</p>
  
  <pre><code>// Demonstrative only, how can I access canvas from rotate?
  _imagePreview = function()
  {
      var canvas = '';
  
      return {
  
          load: function() {
  
              fileReader.onload = function(e) {
  
                  image = new Image();
  
                  image.onload = function() {
  
                      // Empty string (expected)
                      console.log(this.canvas);
  
                      canvas = $('#myCanvas')[0];
  
                      // Canvas object (expected)
                      console.log(this.canvas);
  
                      return true;
                  }
  
              }
  
             image.src = e.target.result;            
          }
  
          fileReader.readAsDataURL(file);
      },
  
      rotate: function() {
  
          // Undefined (unexpected)
          console.log(canvas);
      }
  }
  </code></pre>
  
  <p>I call _imagePreview.load() first, then _imagePreview.rotate(), but I can't seem to get the correct value for canvas.</p>
  
  <p>The rotate method is being called from a click event, after the selects a file and it is drawn into the canvas, so <code>rotate</code> will never be executed before <code>load</code>. Example:</p>
  
  <pre><code>$("#rotate-clockwise").click(function() {
  
      _imagePreview().rotate('+', 90);
  });
  
  $("#rotate-counter-clockwise").click(function() {
  
      _imagePreview().rotate('-', 90);
  }); 
  </code></pre>