Image.width and Image.height equal to 0 after I load images (javascript)

Question

I tried multiple times to assign my image.width and image.height to another variable but the value of the variable is always 0.

This is my code:

//canvas element
var canvas = document.createElement ('canvas');
var canvasWidth = window.innerWidth ;
var canvasHeight = window.innerHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//img element
var loadImage = function (src, scale){
    var image = document.createElement ('img');
    image.onload = function(){
        image.width*=scale;
        image.height*=scale;
    }
    image.src=src;
    return image;
}

//player function
var Player = function (){
    this.image = loadImage("Fish1.png", 1);
    this.score = 0;
    this.width = this.image.width;
    this.height = this.image.height;
    this.x = window.innerWidth/2;
    this.y= window.innerHeight/2;
}

Player.prototype.update = function (){
}

Player.prototype.render = function (){
    //context.drawImage(this.image, this.x, this.y, this.width, this.height);
}


//context
var context = canvas.getContext('2d');

//player object
var player = new Player ();

window.onload = function (){
    document.body.appendChild(canvas);
    //context.drawImage(player.image, player.x, player.y, 100, 100);
}

as u can see, after I did some google searches, I found that I had to first load my images using image.onload, and I did that but I still cannot assign the value of image.width. For example if I put document.write(player.width) or even document.write(player.image.width) the value 0 is printed. But then I tried printing out player.image.width in window.onload function and it prints out the correct value. Can you please tell me what I am missing and how I can solve this problem.

You are accessing the image's dimensions **before** it loaded. Simply adding `onload` does not solve your problem. You still have to access the dimensions *after* the image loaded. — Felix Kling, Jul 07 '15 at 14:00
so how would I load it. I thought that my loadImage function returns a loaded image? — Major Ben, Jul 07 '15 at 14:02
All that `image.onload = function() { ...}` does is tell the browser "please execute this function when the image loaded". The `return image;` statement will still be executed *before* the image loaded. See http://stackoverflow.com/q/23667086/218196 for more info. — Felix Kling, Jul 07 '15 at 14:05
Thank-you for the suggestion. It seems I didn't search enough. I am looking through the article now. — Major Ben, Jul 07 '15 at 14:27

score 2 · Accepted Answer · answered Jul 07 '15 at 14:09

You are still accessing the image's dimensions before it loaded. Simply adding onload does not solve your problem. You still have to access the dimensions after the image loaded

One solution would be to load the images first and then create player objects with the image.

You can have a static method which provides a nice API:

function Player(image) {
    this.image = image;
    // ...
}

Player.withImage = function(src, scale, done) {
    var image = document.createElement('img');
    image.onload = function(){
        image.width *= scale;
        image.height *= scale;
        // once the image loaded, we create a new player and pass it to the callback
        done(new Player(image));
    };
    image.src = src;
};

Player.withImage("Fish1.png", 1, function(player) {
   // context.drawImage(player.image, player.x, player.y, 100, 100);
});

Of course this is a very simple example for a single player. You can keep the image loading code separate from the player class. If you have multiple images to load, you might want to look into promises.

Image.width and Image.height equal to 0 after I load images (javascript)

1 Answers1