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

}

@fuyushimoya $("#myCanvas").ready(function() { $("#result").html("loaded"); }); — Jon, Jul 08 '15 at 17:31
The canvas itself doesn’t need any “loading” time, it will be there almost instantly once the element is created. What does take time, is loading the images you want to place on it – so you should research how to figure out when images have fully loaded. (If your code doesn’t include that already – because otherwise, how are you drawing them onto the canvas in the first place?) — CBroe, Jul 08 '15 at 17:34
I believe you use `context.drawImage(IMG, .....)` to draw your images on that canvas? If so, what you should do is mark `canvas` to loading at the begginning, and set `canvas` to ready in `img.onload` callback — fuyushimoya, Jul 08 '15 at 17:35
@CBroe Thanks for your info. I updated my question with my code! — Jon, Jul 08 '15 at 17:38
Possible duplicate of [HTML5 Canvas: Get Event when drawing is finished](http://stackoverflow.com/questions/11207606/html5-canvas-get-event-when-drawing-is-finished) — Ryan Brodie, Jan 25 '16 at 11:16

score 2 · Answer 1 · edited May 23 '17 at 12:23

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.

edited May 23 '17 at 12:23

Community

1
1

answered Jul 08 '15 at 17:40

yarvit0

71
7

Thanks, but it doesn't work for me. The function is called before the image is loaded. – Jon Jul 08 '15 at 17:55

fuyushimoya · Accepted Answer · 2015-07-08T18:12:58.927

2

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>

edited Jul 08 '15 at 18:12

answered Jul 08 '15 at 17:44

fuyushimoya

9,715
3
27
34

Thanks, the "ready" text works, but the "loading" text isn't printed on the canvas... – Jon Jul 08 '15 at 17:53
I can't find a large enough image to demonstrate it. – fuyushimoya Jul 08 '15 at 17:54
I don't know he use that function with different canvas or all image on a single one, if he use it one-to-one, this is enough. – fuyushimoya Jul 08 '15 at 17:57
@fuyushimoya I use serveral images for one canvas element – Jon Jul 08 '15 at 17:59
Is is also possible for multiple images? – Jon Jul 08 '15 at 18:03
Yes, changing my works.. You want it to display the image upon loaded or display when all image loaded. – fuyushimoya Jul 08 '15 at 18:04
@fuyushimoya I want it when something on the canvas is loading – Jon Jul 08 '15 at 18:09
@Simon911 Updated, take a look. – fuyushimoya Jul 08 '15 at 18:13
@fuyushimoya Great code! Thanks for your help! I can't vote up your answer, I don't have enough reputation... – Jon Jul 08 '15 at 18:22
@fuyushimoya why do you clear the canvas when the canvas is ready? – Jon Jul 08 '15 at 18:37
Because I'm lazy to call the function to get the draw text's area, clear them and draw "ready" on the same position, so I just wipe everything out for simple, you can remove it by your will. – fuyushimoya Jul 08 '15 at 18:46

score 1 · Answer 3 · answered Jul 08 '15 at 17:51

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.

Call a function when HTML5 canvas is ready

3 Answers3

Linked