title: HTML5 canvas how to draw one picture on top of another
body: <p>I want to draw two images on the same canvas. The first image is background.jpg and the second is photo.jpg. I want the photo.jpg always on top of the other:</p>
  
  <pre><code>var ctx = document.getElementById("main").getContext("2d");
  var background = new Image();
  var photo = new Image();
  
  background.onload = function() {    
    ctx.drawImage(background, 0, 0);  
  }
  
  photo.onload = function() {
    ctx.drawImage(photo, 0, 0);  
  }
  
  background.src = "background.jpg";
  photo.src = "photo.jpg"
  </code></pre>
  
  <p>My question is how can I make sure the photo is always on the top. Because the onload are callbacks, I cannot make any assumptions about the calling order. Thanks!</p>