html5 drawImage hoạt động trong firefox, chứ không phải chrome

Question

Tôi vừa mới bắt đầu sử dụng HTML5/Javascript và hiện đang cố gắng kết hợp một trò chơi blackjack đơn giản. Trình duyệt chính của tôi là Chrome và tôi nhận thấy chức năng vẽ của mình cho thẻ không hoạt động. Tôi đã đơn giản hóa mã một chút, nhưng hàm drawImage() vẫn không có vẻ để đặt bất cứ thứ gì trên màn hình.

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

} 

Bây giờ khi tôi chạy trong Chrome, tôi nhận được hộp được vẽ theo ngữ cảnh nhưng KHÔNG được vẽ hình. Tuy nhiên khi tôi chạy nó trong Firefox hình ảnh và hộp chỉ hiển thị tốt. Từ những gì tôi có thể nói cho Firefox và Chrome đều hỗ trợ HTML5 canvas như nhau; bất kỳ ý tưởng nào về lý do tại sao nó không hoạt động trên Chrome?

Answer 1

Cố gắng viết thay vì context.drawImage(...) này:

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