html5 drawImage działa w firefoxie, a nie w chrome

Question

Niedawno zacząłem dabblingować w HTML5/Javascript, a obecnie próbuję stworzyć prostą grę w blackjacka. Moja główna przeglądarka to Chrome i zauważyłem, że funkcja rysowania kart nie działa. Upraszczałem trochę kod, ale funkcja drawImage() nadal nie wyświetlała niczego na ekranie.

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

} 

Teraz, gdy uruchomię to w Chrome, otrzymam ramkę narysowaną przez kontekst, ale NIE rysuję obrazu. Jednak po uruchomieniu go w przeglądarce Firefox obraz i pudełko są wyświetlane poprawnie. Z tego co mogę powiedzieć, że Firefox i Chrome obsługują zarówno płótno HTML5, jak i; wszelkie pomysły, dlaczego nie będzie działać w Chrome?

Answer 1

Spróbuj napisać zamiast context.drawImage(...) tym:

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