title: draw preloaded image into canvas
body: <p>Once again, completely out of my depth but I need to preload some images and then add them to the page when 'all elements (including xml files etc.)' are loaded. The images and references are stored in an array for later access. Trying to draw and image from that array throws an error yet I know it is available as I can just appendTo the page:</p>
  
  <pre><code>preloadImages: function (loadList, callback) {
      var img;
      var loadedFiles = [];
       var remaining = loadList.length;
     $(loadList).each(function(index, address ) {
       img = new Image();
      img.onload = function() {
           --remaining;
            if (remaining &lt;= 0) {
                  callback(loadedFiles);
              }
           };
   img.src = loadList[index];
       loadedFiles.push({file: 'name of image to be loaded', image: img }); //Store the image name for later refernce and the image
      });
  
  
  }
  
  //WHEN CERTAIN OTHER CONDITIONS EXIST I CALL THE FUNCTION BELOW
  
  buildScreen: function ( imageLocs, image){
  //THIS FUNCTION LOOPS THROUGH imageLocs (XML) AND CREATES CANVAS ELEMENTS, ADDING CLASSES ETC AND DRAWS PART OF A SPRITE (image) 
          //INTO THE CANVASES CREATED
      var ctx = $('ID of CANVAS').get(0).getContext("2d");
      var x =  'position x in imageLocs'
          var y =  'position y in imageLocs'
          var w =  'width in imageLocs'
          var h =  'position x in imageLocs'
          ctx.drawImage(image, x,y, w, h, 0, 0, w, h); //THIS THROWS AN ERROR 'TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement'
          //$(image).appendTo("#innerWrapper") //YET I KNOW THAT IT IS AVAILABE AS THIS LINE ADDS THE IMAGE TO THE PAGE
      }
  </code></pre>