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

}

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

}

• javascript
• jquery
• html
• canvas

• how about $(document).on( "CanvasOnLoad", function(){}); – Sushil Commented Jul 8, 2015 at 17:26
• What have you done? The info is not enough to answer. – fuyushimoya Commented Jul 8, 2015 at 17:26
• @Sushil thanks! Can you give me a larger example? – Jon Commented Jul 8, 2015 at 17:31
• @fuyushimoya $("#myCanvas").ready(function() { $("#result").html("loaded"); }); – Jon Commented Jul 8, 2015 at 17:31
• can you post your code? – Sushil Commented Jul 8, 2015 at 17:33

3 Answers 3

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./assets/images/library/download/hydraulicslab_1.jpg',
            'http://www.fmglobal./assets/images/library/download/Fireslope.jpg',
            'http://www.fmglobal./assets/images/library/download/Firefighter_firetest.jpg',
            'http://www.fmglobal./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 plete 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>

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.

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.