canvas context.drawImage fails even though image is loaded

[rainstorm]

The code below DOES works as "intended" at least for creating an artificial delay.

The code works as follows:

• create a bunch of image objects
• set the onload callback to the delay function
• the delay fuction calls the draw function at some other time using a timer
• the image is drawn when the timer ends

function App()
{
    this.canvas = null;
    this.context = null;
    
    this.img = new Array();
    this.imgSrc = new Array();
    
    this.counter = 0;
}

App.prototype.init = function()
{
    this.canvas = document.getElementById('canvas');
    this.context = this.canvas.getContext('2d');
    
    this.img[0] = new Image(); 
    this.img[1] = new Image(); 
    this.img[2] = new Image();
    
    this.img[0].onload = this.delay.call(this, 0); 
    this.img[1].onload = this.delay.call(this, 1); 
    this.img[2].onload = this.delay.call(this, 2);
    
    this.img[0].src = "resources/1280x720-1.jpg";
    this.img[1].src = "resources/1280x720-2.jpg";
    this.img[2].src = "resources/1280x720-3.jpg";
}

App.prototype.delay = function(time)
{
    var self = this;
    setTimeout(function(){self.draw.call(self);}, time * 1000);
}

App.prototype.draw = function()
{
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.drawImage(this.img[this.counter], 0, 0);
    
    this.counter++;
}

However, when i try to make my code more "straightfoward" by setting the onload callback to the draw function directly, the drawImage function fails and throws an error.

Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]"  
nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: http:<...>/edu/test/test.js :: <TOP_LEVEL> :: line 39"  data: no]

the code modified is below:

function App()
{
    this.canvas = null;
    this.context = null;
    
    this.img = new Array();
    this.imgSrc = new Array();
    
    this.counter = 0;
}

App.prototype.init = function()
{
    this.canvas = document.getElementById('canvas');
    this.context = this.canvas.getContext('2d');
    
    this.img[0] = new Image(); 
    this.img[1] = new Image(); 
    this.img[2] = new Image();
    
    this.img[0].onload = this.draw.call(this); 
    this.img[1].onload = this.draw.call(this); 
    this.img[2].onload = this.draw.call(this);
    
    this.img[0].src = "resources/1280x720-1.jpg";
    this.img[1].src = "resources/1280x720-2.jpg";
    this.img[2].src = "resources/1280x720-3.jpg";
}

// App.prototype.delay = function(time)
// {
    // var self = this;
    // setTimeout(function(){self.draw.call(self);}, time * 1000);
// }

App.prototype.draw = function()
{
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.drawImage(this.img[this.counter], 0, 0);
    
    this.counter++;
}

I've done various testing and the problem seems solely on the drawImage function. The context for "this" is correctly provided.

In other words, if i remove this.context.drawImage(), the code works just fine.

Anybody have any clue what's causing the drawImage to fail?

Edit: apparently this is a genuine bug? http://stackoverflow.com/questions/6...-not-available.