Why doesn't image show on load, but shows on refresh?

Question

I\'m playing with the canvas element in HTML5 and I have noticed a peculiar behavior. On initial load, an image I\'m displaying does not show. However, when I refresh the b

Answer 1

Images load asynchronously, so only after refresh it loads early enough because it's cached. Normally it isn't loaded yet at the time you call drawImage. Use onload:

var image = new Image();
image.src = "Images/smiley.png";
image.onload = function() {
    context.drawImage(image, 50, 50);
};