title: Why canvas drawImage doesn't work if using the dom image element?
body: <p>I wrote a canvas js program, but it doesn't work if I use the DOM element in ubuntu 13.04 chromium(it is fine in firefox 23.0). Here is the code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;canvas id="map" width="600" height="600"&gt;&lt;/canvas&gt;
  &lt;img id="photo" src="jiuwo.jpg" style="display:none;"&gt;
  &lt;img id="frame" src="frame.png" style="display:none;"&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  function drawGallary(){
      var canvas = document.getElementById('map');
      if(canvas.getContext){
          var ctx = canvas.getContext('2d');
          var img1 = document.getElementById('photo');
          var img2 = document.getElementById('frame');
          ctx.drawImage(img1, 300, 300, 100, 100, 20, 21, 100, 100); // block of image
          ctx.drawImage(img2, 0, 0);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I found that if I put the drawImage into onload function ,it works well:</p>
  
  <pre><code>function drawGallary2(){
      var canvas = document.getElementById('map');
      if(canvas.getContext){
          var ctx = canvas.getContext('2d');
          var img1 = new Image();
          img1.src = "jiuwo.jpg";
          img1.onload = function(){
              ctx.drawImage(img1, 300, 300, 100, 100, 20, 21, 100, 100);
          }
          var img2 = document.getElementById('frame');
          img2.onload = function(){
              ctx.drawImage(img2, 0, 0);
          }
      }
  }
  </code></pre>
  
  <p>is that onload needed if using the DOM element to be the image source? Thanks.</p>