Drawing Image On Canvas In Firefox On First Load Or Reload With Ctrl+f5 Does Not Work

My problem is that the image is not drawn on the canvas on the first load of the document in firefox (version 34). It works in IE. I created a minimum sample page to illustrate m

Solution 1:

Try calling the drawImage function inside the image's load function to ensure that the image is actually loaded before trying to draw it.

var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
var internal_image = new Image();
internal_image.src = "ball.png";
internal_image.width = 18;
internal_image.height = 19;

internal_image.addEventListener("load", function() {
  context.drawImage(internal_image, 10, 10);
}, false);