Problem with Html5 <canvas>

I have a problem with html5 element. I imple开发者_运维问答mented a canvas and when i enter the site don't run, but when I refresh the page, runs correctly. Also only runs with Firefox. Why I have to refresh and why not in other browsers?

The site is: http://www.dendrosite.com

Thanks!

It is because you are drawing images and not necessarily waiting for them to load.

When you refresh, the image is already loaded, so the problem goes away.

From the Mozilla tutorial:

When this script gets executed, the image starts loading. Trying to call drawImage before the image has finished loading will throw in gecko 1.9.2 and earlier, and silently do nothing in Gecko 2.0 and later. So you must use an onload event handler:

var img = new Image();   // Create new img element
img.onload = function(){
  // execute drawImage statements here
};
img.src = 'myImage.png'; // Set source path