Ich kann nicht auf Leinwand mit geladenem Bild zeichnen

Question

Ich kann kein Bild auf einer Leinwand zeichnen. Ich bin sicher, dass das Bild vor dem Zeichnen geladen wird. Warum kann ich kein Sprite zeichnen, wenn ich sicher bin, dass das Bild geladen ist?

Der Fehler ist der folgende

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)' 

und ein Beispielcode:

//Canvas 
var canvas; 
var ctx; 
var sprite; 

var load = function(){ 

    canvas = document.createElement("canvas"); 
    ctx = canvas.getContext("2d"); 

    canvas.width = 400; 
    canvas.height = 300; 
    document.body.appendChild(canvas); 

    var spriteSheet = new Image(); 
    spriteSheet.onload = function(){ 
     initSprites(this); 
     draw(); 
    }; 
    spriteSheet.src = "http://users.aber.ac.uk/jov2/sprite.png"; 
}; 

var draw = function(){ 
    ctx.drawImage(sprite,0,0); 
} 

var initSprites = function(img){ 
    sprite = new Sprite(img, 0, 0, 32, 32); 
}; 

function Sprite(img, x, y, width, height) { 
    this.img = img; 
    this.x = x*2; 
    this.y = y*2; 
    this.width = width*2; 
    this.height = height*2; 
}; 

Code

Answer 1

Weil Sie versuchen, Instanz von Sprite nicht Bild zu zeichnen. Versuchen Sie diese

var draw = function(){ 
    ctx.drawImage(sprite.img,0,0); 
}