Jump to content

  • Log In with Google      Sign In   
  • Create Account

Interested in a FREE copy of HTML5 game maker Construct 2?

We'll be giving away three Personal Edition licences in next Tuesday's GDNet Direct email newsletter!

Sign up from the right-hand sidebar on our homepage and read Tuesday's newsletter for details!


We're also offering banner ads on our site from just $5! 1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.






Found the drawImage problem ...

Posted by DareDeveloper, in Questions And Problems 22 April 2014 · 393 views

drawImage HTML5 canvas Firefox load
Found the bug I wrote about in the last post: drawImage worked in Chrome, but Firefox showed a white image.
http://www.procgames.com/raidaces

I was completely on the wrong track when I noticed that it sometimes works in Firefox when I call the update function after waiting 5 seconds.

What surprised me was that every time it worked it rendered images with only brown tiles, so I abandoned that track (well, also because waiting 20seconds did not improve the odds at all).
Because I am really ... and I mean REALLY bad at google searches I suspected color profiles (hey, they were mentioned in a canvas related stackexchange discussion ... Posted Image along with green pixels ... can that be a coincidence?).

When I ruled those out I suspected caching ... that it somehow managed to render the all brown tiles images because one of them was cached at some point.
I confirmed that caches did play a role by using the reproducible way to generate maps. After a refresh, drawImage always worked and sometimes it even showed an old version of an image (not from the current map).

Of course it turned out to be the obvious thing. I need to wait for the load event of the image before I draw it to the canvas.
It is not that this thought had not crossed my mind right away when the error occurred ... for some reason I thought that was not relevant ... probably because I expected images to be transferred from canvas to img elements immediately - and in this case synchronously.

In hindsight it makes sense that the normal rules apply. After all, the image data is read using a dataURL. Posted Image




Everybody misses the obvious sometimes.

 

By the way, I am glad that you are attacking what most developers avoid in your image issues because you understand that it is vital to your progress. You seem to be making the effort to build a solid foundation. Many want to just skid into the future and hope to drag some accomplishments with image coding behind them.  /O O\

PARTNERS