title: How do I know when HTML5 Canvas' Rendering is Finished?
body: <p>html:</p>
  
  <pre><code>&lt;canvas id="cnv" width="786" height="1113"&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>var img = new Image(),
      cnv = document.getElementById('cnv');
  
  var context = cnv.getContext('2d');
  
  img.onload = function () {
  
      context.drawImage(img, 0, 0, 786, 1113);
      alert('finished drawing');
  
  }
  
  img.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png';
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FxrSa/14/" rel="nofollow noreferrer">http://jsfiddle.net/FxrSa/14/</a></p>
  
  <p>I want to show the alert after the canvas finished his rendering. But the alert show before the image is drawn.</p>
  
  <p>How can I wait for the GUI thread to finish his rendering?</p>