Core HTML5 Canvas

by David Geary

The Making of Core HTML5 Canvas

Unfinished scaffolding for an IBM devworks article

Synopsis: An explanation of the process I used to write Core HTML5 Canvas.

In his excellent book brain rules, John Medina recounts the story of Dimitri Mendeleyev, who discovered the periodic table of elements in a dream. Medina also tells of an experiment in which rats who run through a maze in the daytime replay that same sequence of brain activity many times, at high speed, when they sleep. It appears that sleep reinforces what we learn during the day.

Like most aspiring writers, when I wrote my first book, Graphic Java in 1995, I spent a lot of time staring at a blank page trying to get started. And once I did, I had to constantly go back and make substantial changes that were very time-consuming. It’s a wonder I ever got anything written at all.

Since then I’ve written eight other books and somewhere along the line I developed a writing process so that nowadays I never stare at blank pages trying to get started, and I rarely make substantial changes once I start writing. That process is what I used when I wrote Core HTML5 Canvas, and it involves, to a great extent, writing in my sleep. Here’s how it works:

To avoid staring at blank pages trying to get started, I don’t write into blank pages at all. Instead, I write into pages full of screenshots, code, diagrams, bulleted lists, tables, tips, notes, and cautions. I refer to that stuff as scaffolding, because it’s the structure that supports the writing. You can see an example of some scaffolding I’m currently working on in the screenshot above.

Code is the first thing I write when I start a chapter or an article. Then, once I have a set of finalized examples, I start building scaffolding. I spend a lot of time building and refining the scaffolding before I write a single word (other than what I write in the tips, notes, cautions).

As an aside, I believe that scaffolding is the most important part of any technical book. Technical books are not novels; readers almost invariably read content out of order and spend a great deal of time skimming instead of actually reading every word. I purchase technical books mostly based on the merits of the book’s scaffolding. If a book has excellent screenshots, diagrams — especially diagrams — tables, notes, etc. it will be much easier to read than books which are mostly just verbiage and code listings.

But here’s the real kicker. Building complete scaffolding and subsequently writing has an almost magical side effect: My books write themselves while I’m sleeping. It takes a lot of time to build and refine scaffolding for a single chapter. For a 50 page chapter, for example, I can easily spend 3-4 weeks full-time scaffolding. And that’s where the magical side effect comes in, because over the course of that 3-4 weeks, as I’m iterating over scaffolding, my mind is busy while I’m sleeping figuring out how to write about it. I will be in the shower, or eating breakfast, or just doing some other mindless task, and passages just pop into my head at random.

Sometimes while I’m scaffolding, the urge to write becomes almost overwhelming. But I know from painful experience that giving in to that urge and writing prematurely will only mean rework for me in the future.

Finally, when scaffolding is complete, I start writing. And now, writing is easy. It’s easy because I don’t have to think about the big picture at all anymore. How the chapter flows, the synergy between examples, and the reference material has all been finalized and all that’s left is for me is to fill in the words along the way. It’s also easy because my subconscious has already written the chapter for me. All I have to do is turn on my thermo-nuclear top-secret weapon — voice recognition software — and start regurgitating those passages.

Of course, that’s not the end of it. When I first started writing someone told me that writing is mostly re-writing and they were correct. After I’ve finalized the scaffolding and written the prose, I iterate over the writing trying to eliminate as many words as I possibly can. But that’s the topic of another blog post.


Not Just Games

When I started learning Canvas, I spent a lot of time on animations and games, primarily because it was the first thing that came to mind and because it’s fun.

One of the first examples I wrote was similar to example-1.8 from Core HTML5 Canvas:

A Canvas-based component

Example 1-8 (click on the image to run the example)

When I wrote the bouncing balls example, I had to figure out how to get the DIV with the Start/Stop button to float above the Canvas. In general, I had to figure out how to use HTML components in conjunction with a Canvas.

Then I started thinking about the inverse: using Canvas-based components in an HTML5 application. For example, here’s an HTML5 application that displays an image:

A Canvas-based component

Example 10-10 (click on the image to run the example)

The preceding example also has three Canvas-based custom controls: two sliders and an image panner.

A canvas is an HTML element that’s an interactive bitmap you can program. That means you can implement any kind of imaginable control with a canvas and use it in any HTML5 application.

It’s also easy to broadcast events from a Canvas-based control to interested parties. For example, when you adjust the image panner’s sliders in the preceding example, the sliders fire events to a listener in the application that modifies the properties of the image panner control (by changing its size or opacity). So in this case, we have one Canvas-based control (slider) that communicates with another control (image panner) to manipulate an ordinary HTML element (an image).

Feel free to download the code for the image panner example to see how I package the controls and reuse them.

Are you implementing custom controls with Canvas? If so, I’d like to hear about it. Relegating Canvas to games is a shame. HTML5’s most versatile element can do a lot more.

NDC, 2012: My Choice for Top 3 Sessions

NDC, Oslo 2012: My 3 Favorite Sessions

This was my first time speaking at NDC, and it was a great conference. Lots of great speakers and sessions, and the food was top-notch. Along with Devoxx and StrangeLoop, NDC is now one of my favourite places to speak.

Besides speaking, I sat through as many sessions as I could. Here were my top three picks:

#1 HTML5 Web Sockets and Socket.IO by Geuillermo Rauch

Guillermo’s the implementor of Socket.IO, and a very good speaker. He’s soft-spoken and self-effacing, and gives you the impression that he’s a fun guy to have a few beers with. He instantly builds rapport with the audience.

And what a great talk this was. Most of it was live-coding a multiplayer CANVAS game that let you blast away DOM elements on NDC Oslo’s website. It’s hard to think of a more compelling example than that.

In general, I’m not a big fan of live coding because so many things can go wrong, and you have to waste a lot of time typing. Generally, people don’t want to watch you type, but they have to constantly pay attention or they get lost.

But if it’s done right, live-coding is magical, and Guillermo did it right. He came prepared with code on his iPad, that he referred to once in a while, and as he was typing, he was able to speak about what he was doing.

This was my pick for best session.

#2 CSS in the 4th dimension: Not your daddy’s CSS animations by Lea Verou

Lea knows what audiences like to see: interactive demos that effortlessly communicate tricky concepts. And this presentation is full of them. For example, in CSS, “for a property to animate with a transition, it must be possible to represent all intermediate states of the property”. Simple, right? Could that ever trip you up? Oh yeah, it most certainly can. Lea explains this very well with a concrete WTF? example. You can watch it starting at around 6:00 of this video of the talk from the Scandanvian Web Development Conference in 2011:

As I exited her talk, I noticed that Lea had nothing but green cards in the speaker box. I thought it was very well deserved.

#3 Web GL What? by Rob Ashton

Another self-effacing speaker, this time a Brit with a dry sense of humor, those two qualities made me like Rob from the very beginning of his talk. He was also refreshingly honest about what a horrid affair it is to implement Web GL applications. Web GL programming is essentially direct manipulation of the GPU, an abstraction that’s almost certainly a long ways away from whatever abstraction you’re trying to express with Web GL.

To paraphrase Rob, implementing Web GL applications consists of “most of the time staring at a black screen, trying to figure out what the hell what wrong”.

One thing I didn’t like about this talk was Rob’s characterization of HTML5 Canvas: “It sucks, don’t use it.” IME, such dogmatic statements rarely hold water upon further examination.

I’m not sure what Rob’s beef is with Canvas, perhaps it’s a perception of poor performance–the Canvas API is orders of magnitude more user friendly than Web GL, so that can’t be it–and if it is performance, Rob should take a look at the current state of Canvas affairs, now that hardware acceleration has become a reality in many browsers (such as Chrome 18, iOS5, Mac OS X Lion, and so on).

Anyway, I thoroughly enjoyed this talk because it showed the basics of Web GL in an entertaining manner and was honest about the warts — which are legion — in Web GL development.

I had to slip away for most of Remy Sharp’s HTML5 Outliers talk, but it looked like a very good talk also.

Lightbox screen effect with JavaScript, CSS3 transitions, and Gimp

From left to right: Before and after clicking Featured Examples

The screenshot on the right illustrates a lightbox screen effect that’s triggered by clicking on the Featured Examples link at Click on the image or go to the website to see the full effect.

In Gimp, I selected one of the various colors in the site’s background, and made that color fully transparent. Then I saved the resulting see-through background as a new image.

When you click Featured Examples, I change the visibility and opacity of a DIV that is overlaid exactly on top of the cover image, like this:

   this.featuredExamplesLink.onclick = function (e) {
      ... = ‘block'; = 0;

      setTimeout ( function (e) {

         // The timeout is necessary because changing opacity to 0
         // and back to 1.0 on the same thread will not trigger
         // the DIV's associated CSS transition
 = 1.0;
       }, 50);

I specify the background and a CSS transition for the DIV:

.overlay {
   background: url('images/see-through-background.png');
   -webkit-transition: opacity 3.0s;
   -moz-transition: opacity 3.0s;
   -o-transition: opacity 3.0s;
   transition: opacity 3.0s;

Finally, I display the carousel on top of the overlay DIV by giving the carousel a higher z-index.


This is the companion blog for Core HTML5 Canvas, written by David Geary and published by Prentice-Hall in May 2012. Thanks for stopping by.

I had a great time writing Core HTML5 Canvas and I plan to continue having a great time as I update the book through subsequent editions to stay as uptodate as possible with the latest HTML5 specification changes.

As I write additional material for subsequent editions of the book, I will make the material publicly available for anyone to review. I will use this blog to announce the availability of that material. I will also blog about other topics related to the book.

Thanks again for stopping by. I hope you enjoy the book.