Book Review - Javascript Graphics & HTML5 Canvas

Since I have been experimenting with HTML5 <canvas> games, I took a little time out this week to read a couple of books recently released on the subject of graphics in the browser. The first, Javascript Graphics, felt a little disjoint in its approach, while the second, HTML5 Canvas was much more solid and consistent.

Both were slightly disappointing, but I think a large part of that is because I am already pretty familiar with the topics and so didn’t feel like I was learning anything new - that’s not the Author’s fault - these are books aimed at developers just getting started with these topics. Usually I like to read these types of books as a kind of revision, and confirmation of things I already know, but both of these just felt a little… weak.

Supercharged Javascript Graphics by Raffaele Cecco…

… seems aimed at the beginner DOM/Canvas developers and is reliant on the jQuery library. This is probably ok for a book like this but my preference would be to tackle the subject directly without using 3rd party libraries.

Strangely, the book starts off with a chapter on javascript optimization techniques, and goes into depth about techniques that I can best describe as premature - lookup tables, bitwise operator optimizations - even unrolling loops. Most of these optimizations will be largely irrelevant when compared to the performance of the graphics themselves. Interacting with the DOM, causing browser re-layout, drawing on the canvas are all going to be orders of magnitude slower. Even with hardware accelerated browsers, figuring out how to avoid rendering the stuff you don’t need is almost always going to provide more bang for the buck than optimizing your javascript loops.

After the optimization stuff, its nice to see a chapter on good old fashioned DHTML sprite techniques with <img> tags and CSS sprite techniques. Even in these days of <canvas> and <svg> a lot can still be achieved with these techniques.

The discussion of an animation loop is a little weird, using a coefficient to scale between the desired frame rate and the actual frame rate, where a more traditional loop would be better off tracking a dt time delta and doing a fixed time step loop that is independent of the rendering frame rate… and in a new book like this there really should be some mention of requestAnimationFrame, even if its just a foot note.

I liked the chapter on javascript games, largely because thats where my head is right now, and the chapter on the <canvas> API was ok, although a little light weight (understandable in a book this thin). But I don’t really understand why it took a left-turn into talking about web sockets which are really nothing to do with graphics?

The chapter on vectors for games was good as well, especially the ‘possible improvements’ section. I think this book would have benefited from this kind of section at the end of every chapter, pointing the user in a direction of where to look next.

Then an arbitrary chapter on the Google chart API, but no real talk of alternatives, no mentions of other javascript libraries like raphael.js, processing.js, or other libraries that make charts and presentations in javascript easier.

Finally, a couple of chapters are thrown in on mobile development, concentrating on jQuery UI and using phoneGap, they were pretty shallow and I didn’t get much out of them.

OVERALL The book seemed disjoint. I’m not quite sure of who its audience is ? game developers ? web app developers ? mobile developers ? Understandably a book this thin is going to be fairly shallow, but it could have benefited from a bit more consistency. I’d give it a 3 out of 5.

HTML5 Canvas by Steve Fulton & Jeff Fulton…

… is a much more solid and consistent effort. Its a larger book as well so can afford to go into depth on the entire <canvas> API, and does so in a fairly sensible order to kick off with:

• Introduction to canvas
• Drawing on the canvas
• Text on the canvas
• Images on the canvas

These chapters are all good, they start with the basics and work their way through the entire API covering pretty much everything you can do with the <canvas>. There are also a couple of chapters on HTML5 <video> and <audio> elements, and the 2nd half of the book largely concentrates on game development with chapters that include Math, Physics and Animation and work through examples of simple HTML games including a simple Asteroids clone.

Finally the obligatory chapters about mobile (more phone gap) and webGL round out the remainder of this book.

I would think this should either have been 2 separate books, one about <canvas> and the second about HTML5 games. Or perhaps a slightly different title because it really is about using the canvas for games. If you’re looking to learn about the canvas for your traditional web apps you probably only really need the 1st half of this book.

OVERALL I don’t have much to say about this book, it’s solid, consistent and easy to read. The first half has good coverage of the <canvas> API and the second half covers how to use it to make simple HTML5 games, which is what I happen to be interested in right now. 4 out of 5.