画像を読み込んでキャンバスに描画できません

Question

キャンバスに画像を描画できません。描画前にイメージがロードされていることを確信しています。 イメージがロードされていることが分かっている場合、スプライトを描画できないのはなぜですか？あなたはスプライトのインスタンスではないイメージを描画しようとしているので

//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

：

エラーは、次

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

とサンプルコードです。試してみてください

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