title: Call a function when HTML5 canvas is ready
body: <p>I load several PNG images onto my canvas, so it takes time to generate the canvas.</p>
  
  <p>I want to show a loading icon when the canvas is loading. How do I check if the canvas is loading or ready?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="1300" height="800"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function buildCanvas(settings){
  
  
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var ctx = canvas.getContext("2d");
  
            var background = new Image();
            background.onload = function() {
              context.drawImage(background, 0, 0, 1300, 836);
            };
            background.src = 'data/skin-army.png'; 
  
  }
  </code></pre>