html5 drawImage funciona en firefox, no en cromo

Question

Recientemente comencé a incursionar en HTML5/Javascript, y actualmente estoy tratando de armar un simple juego de blackjack. Mi navegador principal es Chrome, y noté que mi función de dibujo para tarjetas no funcionaba. Simplifiqué un poco el código, pero la función drawImage() todavía no parecía poner nada en la pantalla.

$(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); 

} 

Ahora cuando ejecuto esto en Chrome, aparece el recuadro dibujado por el contexto pero NO la imagen dibujada. Sin embargo, cuando lo ejecuto en Firefox, la imagen y el cuadro aparecen bien. Por lo que puedo decir, Firefox y Chrome son compatibles con el lienzo HTML5 por igual; ¿Alguna idea de por qué no funcionará en Chrome?

Answer 1

tratar de escribir en lugar de context.drawImage(...) esto:

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