Monday, July 30, 2012

ARGH!!! Best Practices HTML5 Canvas

I'm adding a lot of web development to the Comp Sci curriculum this year.  One thing I've been working on is getting the basics down solid for the new frameworks we'll be using.

Easier said than done.  Case in point: the many HTML5 Canvas books and their suggestions for creating a basic game/animation framework.

Without going into detail (I have a headache), let me just summarize:

Of the many books I have purchased on the HTML5 Canvas element, no two books agree on what should be considered "best practices" with programming the Canvas.  What makes it worse is that most of them speak with conviction as to why their approach makes the most sense.  In another world where I only bought one HTML5 Canvas book, I would simply see it all from one viewpoint.  Instead, I live in this world, and my current headache is mostly from going back and forth over the last several hours on various topics like:

How to best ensure the page has loaded before your script runs

Don't even get me started on this one.  In the end I just said %$&k this!--I'm using JQuery!

How to best erase the canvas between frames

Well, this one isn't really a problem of the various books suggesting different approaches.  This one is just a headache by nature.

How to control the timing of your game or animation

Oh boy.  This one really has changed a lot in the last year.  It appears the best practice now is to NOT use "setTimeout()" or "setInterval()" but to use "requestAnimationFrame()" instead--which is not even mentioned in half the books available on Canvas programming.  Sheesh.

No comments:

Post a Comment