title: can someone explain this Image loader function involving callback
body: <h2>The Code:</h2>
  <pre><code>function loadImages(sources, callback){
      var images = {};
      var loadedImages = 0;
      var numImages = 0;
      for (var src in sources) {
          numImages++;
      }
      for (var src in sources) {
          images[src] = new Image();
          images[src].onload = function(){
              if (++loadedImages &gt;= numImages) {
                  callback(images);
              }
          };
          images[src].src = sources[src];
      }
  }
  window.onload = function(images){
      var canvas = document.getElementById(&quot;myCanvas&quot;);
      var context = canvas.getContext(&quot;2d&quot;);
      var sources = {
          darthVader: &quot;darth-vader.jpg&quot;,
          yoda: &quot;yoda.jpg&quot;
      };
      loadImages(sources, function(images){
          context.drawImage(images.darthVader, 100, 30, 200, 137);
          context.drawImage(images.yoda, 350, 55, 93, 104);
      });
  };
  </code></pre>
  <hr />
  <h2>The Confusion</h2>
  <pre><code>function loadImages(sources, callback){
  </code></pre>
  <p>3: two parameters are passed to this function, one being a function in of itself : callback</p>
  <pre><code>    var images = {};
  </code></pre>
  <p>4: finally, images is set to ... nul(?)</p>
  <pre><code>    var loadedImages = 0;
      var numImages = 0;
      // get num of sources
      for (var src in sources) {
          numImages++;
      }
      for (var src in sources) {
          images[src] = new Image();
          images[src].onload = function(){
              if (++loadedImages &gt;= numImages) {
                  callback(images);
  </code></pre>
  <p>5: my brain is confused at this point....</p>
  <pre><code>            }
          };
          images[src].src = sources[src];
      }
  }
   
  window.onload = function(images){
  </code></pre>
  <p>As I understand,</p>
  <p>1: the parameter &quot;images&quot; is empty.</p>
  <pre><code>    var canvas = document.getElementById(&quot;myCanvas&quot;);
      var context = canvas.getContext(&quot;2d&quot;);
   
      var sources = {
          darthVader: &quot;darth-vader.jpg&quot;,
          yoda: &quot;yoda.jpg&quot;
      };
   
      loadImages(sources, function(images){
  </code></pre>
  <p>2: now its being passed as a parameter to this inline functions -- still without pointing to anywhere... it now supposedly calls loadImages method which is defined above...</p>
  <pre><code>        context.drawImage(images.darthVader, 100, 30, 200, 137);
  </code></pre>
  <p>where doe it get context to darthvader? i only see &quot;sources&quot; have darthVader above</p>
  <pre><code>        context.drawImage(images.yoda, 350, 55, 93, 104);
      });
  };
  </code></pre>
  <p>source: <a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/" rel="nofollow noreferrer">http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/</a></p>
  <p>EDIT: QUESTIONS::</p>
  <p>from step 4: to 5: (specifically in the second for loop), a new array (images[src]) is being created and is passed to the callback() function which is defined as inline just before step 2:. Where does it actually gets images from which were in source?</p>