title: Jquery - Load an image from url and draw it on canvas
body: <p>I'm trying to load multiple images from URLs and then draw them into a canvas element. But I don't want to recreate the same code for each image I have to load.</p>
  
  <p>The loadImage function (it works fine):</p>
  
  <pre><code>function loadImage(divId, imgId, path, width, height) {
  var img = $("&lt;img /&gt;").attr({ 'id': imgId, 'src': path , 'width': width, 'height': height, 'style': "display:none"})
  .load(function () {
      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
          alert('broken image: ' + imgId);
      } else {
          $("#" + divId).append(img);
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>But I would like to call loadImage multiple times and then draw all the images on the canvas:</p>
  
  <pre><code>function myTheme()
  {
      loadImage("ContentBox", "bottom", "http://mydomain/images/bottom.jpg", 400, 391);
      loadImage("ContentBox", "left", "http://mydomain/images/left.jpg", 400, 391);
      loadImage("ContentBox", "right", "http://mydomain/images/right.jpg", 400, 391);
      loadImage("ContentBox", "top", "http://mydomain/images/top.jpg", 400, 391);
  
      // I need to wait ALL loads before using getElementById (these lines below don't work)
      _imgBottom = document.getElementById("bottom");
      _imgLeft = document.getElementById("left");
      _imgRight = document.getElementById("right");
      _imgTop = document.getElementById("top");
  
      Context.drawImage(_imgBottom, 0, 0);
      Context.drawImage(_imgLeft, 0, 0);
      Context.drawImage(_imgRight, 0, 0);
      Context.drawImage(_imgTop, 0, 0);
  }
  </code></pre>
  
  <p>How could I do this please ?</p>
  
  <p>Thanks</p>