Question

I’m writing a web application using a <canvas> element. For simplicity, I have stripped it down to the bare essentials needed to show the problem: http://demo.kuehldesign.net/imagetest/

On Safari and Chrome (Mac), the test.png image which is drawn on the canvas always shows, even when it was not previously downloaded.

For some reason, when Firefox has not previously downloaded the file (and presumably stored it in the cache), the file is not displayed (even though Image.onload is called).

To replicate:

• Open the link above in the latest Firefox (I’m on Mac, guessing it happens on other OSes as well)
• Refresh the page. It should have worked that time.
• Hold shift while refreshing the page to not use the cache. You should see a status which is called when the image is downloaded, but not see the image.

The same steps show the image fine in Chrome and Safari.

Any ideas why Firefox is not showing the image even after it has loaded? Ideally I would like to continue passing the Imageobject as a parameter to the test function.

Thanks.

Answer 1

Setting image.src = image.src after adding the onload event handler fixed the problem.