Canvas HTML loading time

Question

I try to make a game with HTML Canvas but I've a problem.

When I call my 'init' function with 'window.onload', my program doesn't load any images. The canvas has been created, but images aren't there, and when I submit my function in chrome console, images appears... So I want to load my images and execute the function when it's done.

Thanks for help !

var requestAnimId;

// Initialisation
function init() {

    var tilemapCtx = new Canvas('tilemap', 800, 600, 1);

    var tilemap = new Tilemap("sand", tilemapCtx);

    requestAnimId = window.requestAnimationFrame(update);
}

// Boucle de rafraîchissement
function update() {

    requestAnimId = window.requestAnimationFrame(update);
}

window.onload = init;

Here is Tilemap :

var Tilemap = function(map, canvas) {

for (var y = 0; y < 10; y++) {

    for (var x = 0; x < 10; x++) {
        // Création de la tile 
        this.image = new Image();
        // Définition de l'image  
        switch(tilemaps[map][y][x]) {
            case " ": 
                this.image.src = "assets/sand.png";
            break;
            case "#": 
                this.image.src = "assets/wall.png";
            break;
        } 
        // Affichage de l'image 
        //canvas.drawImage(this.image, tileX, tileY, tilesetWidth, tilesetHeight, x, y, 32, 32);
        canvas.drawImage(this.image, 32, 32);
    }
}

}

and Canvas :

var Canvas = function(name, width, height, zIndex) {
this.canvas = window.document.createElement("canvas");
this.canvas.id = name;
this.canvas.style.position = "absolute";
this.canvas.width = width;
this.canvas.height = height;
this.canvas.style.zIndex = zIndex;
document.body.appendChild(this.canvas);

return this.canvas.getContext('2d');

}

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

Notice that for your tile you only use two images. You use a double loop that will load 100 images.

One problem is you are creating 100 images when in the end you only need two.

Now the reason why your images don't get drawn is because they haven't been loaded. You need to give time for your images to load before you try drawing them.

You need to create an array list of images and make sure they are loaded before you call your init()

This will ensure all your images have been loaded before init() is called.

var len = pics.length;
var loadCounter = 0;
for(var i = 0; i < len; i++) {
    $(document.createElement(img)).attr('src', pics[i]).load(function() {
        alert(pics[i] + 'is loaded');
        loadCounter++;
        if(loadCounter === len) {
            alert("all are loaded");   
        }
    });
}

edited May 23 '17 at 11:46

Community

1
1

answered Mar 14 '15 at 19:14

kemicofa ghost

16,349
8
82
131

Canvas is a class that I created myself, the canvas is really there when I see the console elements, and images appears right in it, but only when I type myself the 'init' function in the console, and not when loading the page. – Karz Mar 14 '15 at 19:21
Update your question and post your Canvas and Tilemap class also notice that in your update you don't update anything. All you do is call the requestAnimationFrame. So all you'll do is loop forever without doing anything. – kemicofa ghost Mar 14 '15 at 19:27
I wrote them but like I said that's not a problem with that class, this is working right but that's only a problem of loading time. I tried without update and nothing changed. – Karz Mar 14 '15 at 19:31
In fact, when I want to draw an image directly in init function, it doesn't load... This is a problem I didn't have before... In all tutorials they do the same and it doesn't work with me... – Karz Mar 14 '15 at 19:37
@Krili are you able to do this with your project? http://jsfiddle.net/Grimbode/sxzh15y6/4/ – kemicofa ghost Mar 14 '15 at 19:47
Console.log works, but no images ! That's incredible, I tried to disable cache and nothing. So that's a damn bug. Thanks for your help EDIT : I just tried to type init in the console, and images appears... – Karz Mar 14 '15 at 20:07
So that was the solution? init()? – kemicofa ghost Mar 14 '15 at 20:11
No, I have to type this function in the console to make the images appears... I took old projects I done and they doesn't work so that's a chrome problem... I will try to reinstall it. – Karz Mar 14 '15 at 20:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72997/discussion-between-grimbode-and-krili). – kemicofa ghost Mar 14 '15 at 20:31

Canvas HTML loading time

1 Answers1