HTML5 and Canvas Troubles

The other day I got to use my HTML5 Canvas game engine for a project that wasn’t game related but needed to be dynamic. This project was a lot of fun until one of our project members couldn’t see the project on his browser. Digging into the issue some it was related to the Safari browser on his mac.

Without having a mac myself this was very hard to diagnose and the project member wasn’t very responsive. So instead of bugging our team member every few seconds as I tracked down the issue I found a cool website called BrowserStack where they have a lot of different browser you can use to test your site. This isn’t a bad option when you don’t have access to a virtual mac or even a virtual system to test on. The major down side I found to using this kind of site was that the iteration process was really slowed down.

The big pro on this site is that once you get the browser up and going it will save the link your testing and use it for just about any browser you run a test on. I would like to get a one month subscription for them to do some other major testing but I just did have the $30 to shell out for this project.

The big lesson I learned on this one is JavaScript ES6 is not really that well supported and many of the new features I was using in the engine had to be down graded to code that would be supported by older browsers. This is very typical for browsers and has always been an issue since I started working in the web back in the mid 90’s. Never expect your users to ever have technology that will support all the cool new features you want to use in your web application.

The same probably can be said about operating systems because new version come out just about every other year in the Microsoft world and in Linux the roll out is even faster. But for most user they don’t upgrade to the latest and greatest gear every time a new version comes out so be prepared to support old technology on any of your projects.

One of the major issues I ran into was the new promise structure of ES6. This was a cool idea to try and use but is only support by modern browsers which means Safari didn’t support it in 7.1. Fortunately I had already started building an event system for the engine so I changed it from the promise into being driven by an event.

The new “let” definition was also not supported so I had to change a lot of code where I used the less scoped let back into var. There were many other errors but once these got address I was able to then uglify my code without errors. It seems even today ES6 isn’t that well supported but hopefully this will start to change soon.