html5 drawImage फ़ायरफ़ॉक्स में काम करता है, क्रोम

Question

मैंने हाल ही में एचटीएमएल 5/जावास्क्रिप्ट में डबलिंग शुरू कर दी है, और वर्तमान में एक साधारण ब्लैकजैक गेम को एक साथ रखने की कोशिश कर रहा हूं। मेरा मुख्य ब्राउज़र क्रोम है, और मैंने देखा होगा कि कार्ड के लिए मेरा ड्रॉ फ़ंक्शन काम नहीं कर रहा था। मैंने कोड को थोड़ा सा सरल बना दिया, लेकिन drawImage() फ़ंक्शन अभी भी स्क्रीन पर कुछ भी नहीं लग रहा था।

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

} 

अब जब मैं इसे क्रोम में चलाता हूं, तो मुझे संदर्भ द्वारा खींचा गया बॉक्स मिलता है लेकिन छवि खींची नहीं जाती है। हालांकि जब मैं इसे फ़ायरफ़ॉक्स में चलाता हूं तो छवि और बॉक्स ठीक दिखता है। मैं फ़ायरफ़ॉक्स और क्रोम को बता सकता हूं कि दोनों ही एचटीएमएल 5 कैनवास का समर्थन करते हैं; किसी भी विचार के रूप में यह क्रोम पर क्यों काम नहीं करेगा?

Answer 1

context.drawImage(...) इस के बजाय लिखने के लिए प्रयास करें:

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