Html5 canvas not drawing

Question

I have a problem with an object not drawing it's image. I've set the onload property of the image to the draw function..

//ctor
function Sprite(someargs,pContext)
    this.setContext(pContext); //This could be the problem?
    this.setX(px); 
    this.setY(py);
    this.setTexture(pImagePath);    


//I run this in the constructor 
Sprite.prototype.setTexture = function(pImagePath){
    this.texture = new Image();
    this.texture.onload = this.draw();  
    this.texture.src = pImagePath;
};

Sprite.prototype.draw = function(){

    this.getContext().drawImage(this.texture,this.getX(),this.getY(),100,100);
};

Sprite.prototype.setContext = function(pContext){
       this.mContext = pContext;
};

No errors at runtime, image not drawn onto canvas though. I'v put alerts in all the above methods, all of which are being executed.

Anyone got any ideas as to why it's not drawing?

Cheers

Answer 1

this.texture.onload = this.draw();  

you are not setting onload to the draw function but to the result of draw function

this.texture.onload = this.draw;

also wouldn't be good because you will lose your context of this in here. this inside of draw function will point to texture instead of Sprite

you need to bind the function draw to this (which is the Sprite at the moment) and pass it to onload

this.texture.onload = this.draw.bind(this);

or:

var that = this;
this.texture.onload = function() { that.draw(); }