image.onload in function - why doesn't it work?

Question

I'm new using JS. I want to keep all of the information about an object in one place. So I've made this function:

function Obiekt(img) {
this.img = img;
this.ready = false;
this.image = new Image();
this.image.src = this.img;
this.image.onload = function() {
    ready = true;
};
this.x = 0;
this.y = 0;
this.rotation = 0;
}

Then I've made my object, named hero.

var hero = new Obiekt("images/hero.png");

Problem is, hero.ready is always false and I can't draw this.

if (hero.ready) {
     ctx.drawImage(hero.image, 0, 0);
}

Can you help me?

Answer 1

Two problems :

• ready can't be found
• If your image is cached (depending on the browser), the order you used can't work as the image isn't loaded after you set the callback.

Here's a solution :

var _this = this;
this.image.onload = function() {
    _this.ready = true;
};
this.image.src = this.img;

(and I'd add that the naming isn't very good : I'd prefer imgsrc over img )