html5 drawImage funziona in firefox, non cromato

Question

Ho appena iniziato a dilettarmi in HTML5/Javascript e sto attualmente cercando di mettere insieme un semplice gioco di blackjack. Il mio browser principale è Chrome, e ho notato che la mia funzione di disegno per le carte non funzionava. Ho semplificato un po 'il codice, ma la funzione drawImage() non sembrava ancora mettere nulla sullo schermo.

$(document).ready(function(){ 
init(); 
}); 

function init(){ 
setCanvas(); 
} 

function setCanvas(){ 
var canvas = document.getElementById("game-canvas"); 
var context = canvas.getContext("2d"); 
canvas.width = 800 
canvas.height = 600 
context.fillStyle = "#004F10"; 
context.fillRect(0,0,800,600); 
var back = new Image(); 
back.src = "testermed.png" 
context.drawImage(back,54,83); 

} 

Ora, quando ho eseguito questo in Chrome, ottengo la casella disegnato dal contesto, ma non l'immagine disegnata. Tuttavia, quando lo eseguo in Firefox, l'immagine e la casella vengono visualizzate correttamente. Da quello che posso dire, Firefox e Chrome supportano entrambi la tela HTML5 allo stesso modo; qualche idea sul motivo per cui non funzionerà su Chrome?

Answer 1

tenta di scrivere invece di context.drawImage(...) questo:

back.onload = function() { 
    context.drawImage(back, 54, 83); 
}