Html5 drawImage works in firefox, not in chrome

Question

I just started doing HTML5 / Javascript and am currently trying to put together a simple blackjack game. My main browser is Chrome, and I noticed that my drawing function for maps does not work. I simplified the code a bit, but the drawImage () function still didn't fit anything on the screen.

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

Now, when I run this in Chrome, I get a field drawn by context, but NOT an image. However, when I launch it in Firefox, the image and window appear just fine. From what I can tell, Firefox and Chrome both support HTML5 canvas; any ideas as to why it won’t work in Chrome?

Answer 1

Try writing instead of context.drawImage(...) following:

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