Call a function when HTML5 canvas is ready

Question

I load several PNG images onto my canvas, so it takes time to generate the canvas.

I want to show a loading icon when the canvas is loading. How do I check if the canvas is loading or ready?

HTML:

<canvas id="myCanvas" width="1300" height="800"></canvas>

Javascript:

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'; 

}

Answer 1

When created a canvas or start to fetch the image, do something to indicate user that image is loading, and if you also want to use the canvas to notify user that the image is loaded, put that logic in img.onload.

Found a large enough pic to demonstrate, should able to see the words change.

function buildCanvas(settings){

          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var ctx = canvas.getContext("2d");
          var images = [
            'http://www.fmglobal.com/assets/images/library/download/hydraulicslab_1.jpg',
            'http://www.fmglobal.com/assets/images/library/download/Fireslope.jpg',
            'http://www.fmglobal.com/assets/images/library/download/Firefighter_firetest.jpg',
            'http://www.fmglobal.com/assets/images/library/download/rowsprinklers.jpg'
          ];
          var imagesLoading = images.length;
          
          // Image loader.
          var loadImage = function(i) {
             var img = new Image();
             img.onload = function() {
               images[i] = img;
               --imagesLoading;
               // Call the complete callback when all images loaded.
               if (imagesLoading === 0) {
                 workDone();
               }
             };
             img.src = images[i];
          };
          
          // Call upon all images loaded.
          var workDone = function() {
            // Clear canvas
            canvas.width = canvas.width;
            
             // Anything you want to notify the user image is Ready.
            ctx.fillText("Ready", 100, 130);
            
            
            var i, iLen = images.length;
            for (i = 0; i < iLen; ++i) {
              context.drawImage(images[i], 100*i, 0, 100*(i+1), 100);
            }
          };
           
          // Start to load all images.
          var i;
          for(i = 0; i < imagesLoading; ++i) {
            loadImage(i);
          }
  
          // Show image loading. with animation or something else...
          ctx.fillText("loading", 100,  130);
}

buildCanvas();

<canvas id="myCanvas" width="500" height="300"></canvas>