title: Javascript : Loading images via Javascript
body: <p>This is a chunk of javascript code from a tutorial where  they are trying to load an image onto a canvas and do some manipulations later on. I have omitted most of the irrelevant code to make it simpler to understand. </p>
  
  <p>1) I fail to understand why the line containing the filename of the image is always put below the imageObj.onload function . Does it matter ? At what point does the image start getting loaded ?</p>
  
  <p>2) What will happen if I forget to put the source of the image file.</p>
  
  <pre><code>&lt;script&gt;
              window.onload = function(){
                  ....
  
                  var imageObj = new Image();
  
                  imageObj.onload = function(){
                      ....
                      ....
                      });
  
                      ....
                      ....
  
                  };
                  imageObj.src = "yoda.jpg";
  
              };
          &lt;/script&gt;
  </code></pre>