drawImage() not drawing pre-loaded image object. Using OO javascript

I'm writing a simple 2D side scroller game using JavaScript + Canvas. I am trying to do this while learning OO JavaScript. I'm encountering an issue where my image will not draw to the canvas, despite being loaded correctly. Here's the code:

//===================================
// class - Canvas
//===================================

var classCanvas = function(id){
    canvas  = document.getElementById(id);
    context = canvas.getContext("2d"); 
}

//==========开发者_如何学Go=========================
// abstract class - Image Drawer
//===================================

var classImageDrawer = function(that){
this.draw = function(){
    context.drawImage(that.img,
                      that.spriteCoordsX,
                      that.spriteCoordsY,
                      that.width,
                      that.height,
                      that.posX,
                      that.posY,
                      that.width,
                      that.height);
    }
}

//===================================
// class - Level
//===================================

var classLevel = function(name, src){
   this.name           = name;
   this.img            = new Image();
   this.img.src        = src;
   this.img.onload     = function(){ };
   this.spriteCoordsX  = 0;
   this.spriteCoordsY  = 0;
   this.posY           = 0;
   this.posX           = 0;
   this.height         = 400;
   this.width          = 600;
   this.drawer         = new classImageDrawer(this);
}

//==================================
//  Begin 
//==================================

var game      = new classCanvas("playground");
game.LevelOne = new classLevel("LevelOne", "images/foreground-land.png");

game.LevelOne.drawer.draw(); 

I have checked the code, and I know the image is getting loaded correctly. No errors occur during runtime, the image "foreground-land.png" simply DOESN'T show up on the canvas!

Your image may be loading fine, but as far as I can tell your call to game.LevelOne.drawer.draw() has no guarantee that foreground-land.png has loaded at that point (remember, images are loaded asynchronously without blocking the execution of other code).

Your onload function for the image object in your classLevel class is empty and anonymous. Nothing happens when the image is finished loading. I'm not sure how you want to structure your code given everything else you have going on, but you should only allow the call to game.LevelOne.drawer.draw() to succeed if the resources it depends upon have been fully loaded. The best way to do this would be to hook into the onload callback for all resources you require for that object (in this case, it's just the one image).

Loading images is an async operation, you are (basically) ignoring the loading process, and acting as though it is sync operations.

One thing you could look at is using a 3rd parameter as a callback ("LevelOne", "images/foreground-land.png", function() { this.drawer.draw() }) and doing that as the onload