HTML5 Canvas Element Intro

Click above to start HTML5 Canvas Test

Time to take the plunge….I’ve been doing some initial investigation into the HTML5 Canvas element.  My initial build isn’t overly sophisticated, but I’ve used it to try out several of the features that I see as key success factors in re-engineering my current code over to a HTML5/JavaScript environment.

In addition to just getting some general familiarity with HTML5 and Javascript, I’m also experimenting with overall presentation, linkages with my WordPress blogs, opening a new window/tab, etc.

a.  This app establishes a context to two distinct canvas; using multiple layers will allow me to have one layer for the underlying mapsheet, a second layer for unit counters and a third layer for messaging to the user;

b.  I’ve used the z-index tag to ensure the unit counters always stay on top during the redraw method;

c.  I’ve included use of the SetInterval command as the means for establishing a time interval between redraws — serves as a rudimentary main-loop feature (more to follow on that);

d.  Declares an Image object and loads a Source Image file (using png);

Also, I’m looking closely at overall performance, given that JavaScript is not compiled.  In doing an initial quicklook, I’ve noticed that this moving Counter image moves  more slowly when I view this HTML5/Javascript app on my iPad than it does on my desktop computer – significantly more slowly when the iPad is in Portrait mode of Safarii.  (One of the factors I’ll be paying close attention to as the complexity of the application grows closer to the current Silverlight version).

There are two basic sources I’ve found to be exceptional in facilitating a rapid spin-up:

a.  “The Essential Guide to HTML5; Using Games to Learn HTML5 and Javascript”, by Jeanine Meyer, and

b.  Matthew Casperson’s Hubfolio Series: Game Development with JavaScript and the Canvas Element. (Link)

Both are excellent starting points for quickly getting up to speed.

Just for reference, I’m using Aptana Studio 2 Integrated Development Environment (IDE) – very helpful features, quick startup, HTML and JavaScript code assist, JavaScript Debugging and Live Preview capability.  A very nice product.  (Link)

Click to start HTML5 CSS Test

Powered by Wordpress | Designed by Elegant Themes