title: javascript canvas - check if images created with toDataURL() are loaded
body: <p>I'm loading an image into my albImg array.</p>
  
  <p>in my loop i then do this:</p>
  
  <pre><code>    for(var j = 1; j &lt; albImg.length; j++){
          if(albImg[j].complete == true &amp;&amp; albImg[j].width &gt; 0){
              loadedimages++;
          }
      }
  </code></pre>
  
  <p>to make sure all my images are loaded.
  I then call my flipImg() function like this:</p>
  
  <pre><code>    if(loadedimages == albImg.length-1){
           flipImg();
      }
  </code></pre>
  
  <p>I then flip an image and </p>
  
  <pre><code>ctx2.save();
  ctx2.scale(-1, 1);
  for (var i = RszSpriteCount; i &lt; sprites.length; i++) {
      ctx2.drawImage(albImg[sprites[i][0]], sprites[i][1], sprites[i][2], sprites[i][3], sprites[i][4], 0 - (sprites[i][1] + sprites[i][3]), sprites[i][2], sprites[i][3], sprites[i][4]);
  }
  ctx2.restore();
  var flipSz = albImg.length;
  albImg[flipSz] = new Image();
  albImg[flipSz].src = cnv2.toDataURL();
  </code></pre>
  
  <p>Here's where my problem begins.</p>
  
  <p>The new image I created - albImg[5] - can't be displayed until it is loaded.
  But it is created as if it already is loaded.</p>
  
  <p>That is to say that:</p>
  
  <p>albImg[5].width is already set (to 750) before I can display it.
  albImg[5].complete is set to true, before I can display it.
  albImg[5].onload = ctx.drawImage(albImg[5], 0, 0); will try to draw the image before it is loaded.</p>
  
  <p>How can I check if my flipped image really is loaded before I display it? in Javascript?</p>
  
  <p>(due to circumstances I'm not using jQuery for this)</p>
  
  <p>Please help.</p>