なぜJavaScriptはキャンバス上に画像を描画しないのですか？

Question

キャンバスに画像を描画する際に問題があります。エラーはありませんが、まだ画像が描画されていません。コードの塊を確認し、私はできません見ることができるかどうかを確認してください：

function loadPacman(posX, posY) { 
    this.posX = posX; 
    this.posY = posY; 
    pacman = new Image(); 
    pacman.src="http://www.frogbug.se/pacman/img/naziman.png"; 
    pacman.addEventListener("load", function(){ 
      canvas.drawImage(pacman, this.posX, this.posY) 
     }, false); 
} 

function loadGhost(posX, posY) { 
    this.posX = posX; 
    this.posY = posY; 
    ghost = new Image(); 
    ghost.src="http://www.frogbug.se/pacman/img/ghost.png"; 
    ghost.addEventListener("load", function(){ 
      canvas.drawImage(ghost, this.posX, this.posY) 
     }, false); 
} 

そして、これは、ページのロード時にロードする私の機能である：事前に

function onLoad() { 
    var xy = document.getElementById('canvas'); 
    canvas = xy.getContext('2d'); 
    //calculate the x and y for canvas 
    x = xy.width; 
    y = xy.height; 

    //divide the width and length of the canvas to get small cubes 
    //which is 40x40 
    xtile = Math.floor(x/40); 
    ytile = Math.floor(y/40); 

    //draw lines around the canvas 
    canvas.strokeRect(0, 0, x, y); 

    //the array for the map 
    var map = getMapArray(); 

    //draw the map 
    drawMap(map); 
    //fillCanvas("0010", 0, 40, 40, 40); 

    //load the ghost and pacman 
    loadPacman(0, 0); 
    loadGhost((xtile*40)-40, (ytile*40)-40); 
} 

感謝を！ あなたはここに完全なソースなどを表示することができます。 http://www.picturds.com/pacman_serious/

Answer 1

ロードコールバックでthis.posXとthis.posYからthisを削除します。 this.posX（window）に割り当てたときと同じではなく、thisがイメージ要素であり、thisと同じではありません。

http://jsfiddle.net/5dkx4/