Call A Function When Html5 Canvas Is Ready

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

Solution 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>

Solution 2:

Maybe this can help you HTML5 Canvas: Get Event when drawing is finished

If as it says it is synchronus yo can just hide the loader at the end of drawImage.

Solution 3:

Simply using the "window.onload" event will work.

canvasReady = false;
window.onload = function(){canvasReady = true; Main();}

//Do some loading stuff, when the canvas is ready, the event will trigger your main function to start.

Main(){/* do canvas-y stuff here */}

That's the basis. When the canvas has loaded, you can call the function that starts your canvas application.