HTML5 Canvas Book Example Files

HTML5 Canvas Book Example Files

Just in case these are not just available yet on the O'Reilly Site




In Celebration of Day Against DRM (Fri, May 3, 2013) 5000+ titles 1/2 off including HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition

              In Celebration of *Day *Against DRM

Save 50% on 5000+ Ebooks & Videos

(Save 60% on orders over $100)

Having the ability to download files at your convenience,

store them on all your devices, or share them with a friend

or colleague as you would a print book is liberating, and is

how it should be. This is a critical moment in the fight against

DRM. A proposal currently being considered by the W3C would

weave DRM into HTML5 — in other words, into the very fabric of

the Web.


This includes the latest edition of our book, the just released HTML5 Canvas 2nd Edition.


Ebooks from oreilly.com are DRM-free. You get free lifetime access, multiple file formats, free updates.

Use discount code: DRM2013 - Deal expires May 3, 2012 at

11:59pm PT and cannot be combined with other offers.


The HTML5 Canvas Second Edition Has Been Released (Deal of the Day, 50% off)

HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition


The Second Edition (so the 3rd book) I have written with my brother Steve, The HTML5 Canvas was released today by O'Reilly. If you are interested in this wildly popular subject (for tech heads), you can get the E-Book edition for 1/2 off by using the code DEAL on the Publisher Web Site (It's the DEAL of the day).


This edition has added and changed over 50% of the original First edition. We have added A LOT of game related topics (as we do in everything we create). These include pixel perfect collision detection, Box2D Physics, A* Path Finding, targeting mobile browsers with full screen scalable content, and much much more. Every chapter has been re-written with additional content added and less popular or redundant content removed.

There are print editions available also at all major book retailers.


Friday was a Tough Day for a Deadline, but HTML5 Canvas 2nd Edition Is Nearly Complete

By Jeff Fulton (8bitjeff)

Tough Day for a Deadline, but HTML5 Canvas 2nd Edition Is Nearly Complete

There will be no Atari video game retrospectives this weekend on 8bitrocket. Far too many little ones will not get to experience their own version of the same thing, never have a chance to write about it some day, and never have the joy of spending another holiday season with their families. Our hearts are broken here at 8bitrocket towers. For a site dedicated to things we loved as children and exploring how to re-visit and re-create those memories in many different ways, we just can't celebrate anything like that right now. What we have is work though, and as anyone who is trying to make it without any corporate backing knows, work MUST go on, no matter what happens, or food doesn't make it on the table, health insurance premiums are not paid for, car loans and housing payments go un-paid and life just kind of stops and spins like a proverbial hamster on a habitrail.

First, here is a list of the first names of all the brave little ones and their hero protectors that didn't make it out safely.
I can't fathom the evil that would do such a thing:


So, with a heavy heart and tears welling up, I crashed through some technical barriers I was experiencing and finally completed chapter 9 of the Second Edition of our HTML5 Canvas book for O'Reilly.

All of the chapters have been updated, revised, and re-written to add new content and replace out-dated or incomplete ideas that simply were not possible on the Canvas when we started on this project 2 and 1/2 years ago. My major focus has been adding in more game development content to the various chapters (especially the two game specific chapters) to have a more complete reference guide for the budding and experienced HTML5 Canvas game developers. Not that the first edition was limited in scope at all, but there was no time or space to cover some subjects that we really wanted to cover, and some that were impossible until this point. I have been working on chapters 8 and 9 (Game Essentials 1 and 2) for the last few months, shoring them up to provide a much better set of tools for myself and anyone who buys the new edition. Steve has been working on updating the physics, sounds, video, text chapters and adding anything new he finds that might be useful across the the entire book.

It has not been easy, especially since the deadline was Friday (a tragic day to even think about work), but I was finally able to get a revised 2nd edition of chapter 9 (Game Essentials Part 2)  complete and to the publisher for a first look. The two game chapters (8, and 9) and the image chapter (4) have been re-written to add in things that I wanted in the first edition but just didn't have time to fit in: Pixel-based collision detection, A* Pathfinding, Fine and Coarse tile-based world scrolling, and more. I know Steve has been busy adding in Box 2D content and other goodies to his chapters. There is just one chapter left to do for me, number 10. It deals with using Phone-Gap to create a HTML5 based iOS native application, and we are adding in the concept porting a browser game to a touch interface. The first part needs to be re-written 100% as everything about PhoneGap, xCode and the iOS portal has been completely re-vamped since the first edition. Also, more and more people are publishing games on the internet to target mobile browsers and we wanted to add in some "secret sauce" that we have uncovered to make this a little easier of a transition for the developer.

Here are some images from the various chapters that I have written to help give you an idea of what game subjects I have been covering and how they will be presented in the new edition (Tentative publish date March 2013).

Pixel Based Collisions

Pixel Based Collisions

AStar on the Canvas

AStar on the Canvas

Fine Scrolling

Fine Scrolling


I am starting on chapter 10 today, so hopefully the entire first draft will be complete by the middle of the week and then it is on to technical reviewer revisions and Chicago Book of Style red lines to fix.


We are looking for Paid Technical Reviewers for the 2nd Edition of The HTML5 Canvas book on O’Reilly

By Jeff D. Fulton (8bitjeff)

We are looking for Paid Technical Reviewers for the 2nd Edition of The HTML5 Canvas book on O'Reilly press.

We have added about 150 new pages that need to be reviewed by 2-3 people with knowledge of Javascript and or the HTML5 Canvas. We'll offer you cash and name credit in the book for your efforts.

If you are interested, please contact me at jeff[at]8bitrocket.com (obviously replace the "[at]" with an "@".


Xbox 360 Internet Explorer Plays HTML5 Games…But Not Flash

This morning I work up early to download the new Xbox Live update that includes Internet Explorer.  My goal was to try out some of our HTML5 Canvas game experiments to see is they work on the new I.E for the Xbox.   To my surprise, they work fairly well.   Both 1945 Demo and Atari 2600 Match 3 work with the game pad (the mouse maps well to the analog stick) and include nearly all the sound FX (no mean feat for an HTML5 game).

The main issues seem to be the is the size/scale of the games, and mapping the cursor to stay inside the game area. I spent no time trying to update the games to work inside the 360 I.E. browser, but I'm certain it will not take very long to optimize them for the platform.

Obviously, the games are just demos and need work, but you can see that there might be a bright future for browser-based games on the Xbox...at least in HTML5.   The Flash games I tried did not work, and it looks like the player cannot be installed.   So much for playing Home Computer Wars on the Xbox.  I guess I need to make a version in HTML5.






Atari 2600 Match  3 Demo






1945 Demo




Hit Testing For Accessibility May Be Added To The W3C HTML5 Canvas Specification. What Does It Mean For Game Developers?

By Steve Fulton

While searching for the  updated W3C HTML 2d Context (Canvas) API Specification today I ran into some some references to a  new feature the W3C has proposed to add the Canvas Spec: Hit Testing .

It has been known for quite some time that the HTML5 Canvas, by it's nature if being an Immediate Mode  bit-mapped area of the screen, does not lend itself to Accessibility.   There is no DOM or display list inherent in the Canvas to make is easy for accessibility devices (e.g. screen readers) to search for text and images and their properties.   To make the Canvas accessible, a method known as "Fallback DOM Concept" or "subdom" was devised.  Using this method, developers  create a DOM element that match every element on the Canvas and put them in the "subdom", This method quickly becomes unwieldy for anyone who has tried to do anything more intricate than a simple Canvas interface.  Why? Because associating fallback elements with Canvas interaction is not always an easy task, and is complicated by screen readers that need to know the exact position of an element on the Canvas so they can interpret it's properties.

Hit Testing Proposal

To help solve this issue, the Canvas needs some way to associate "subdom" elements with an area on the bit-mapped Canvas. The new  W3c Canvas Hit Testing proposal  outlines why this type of functionality should be added to the Canvas specification:

In the current HTML5 specification, authors are advised to create a fallback DOM under the canvas element to enable screen readers to interact with canvas user interfaces. The size and position of those elements are not defined, which causes problems for accessibility tools - what size/position should they report for these elements?

Because canvas elements usually respond to user input, it seems prudent to solve the hit testing and accessibility issues with the same mechanism.

So what kind of mechanism are they suggesting?

The idea is to create two new methods, setElementPath(element), and clearElementPath(element) that will allow programmers to define (and delete) an area of the Canvas to use as a hit area, provided that it is associated with an element the "fallback DOM" of the Canvas. It appears that you must have an accessible fallback DOM element to provide to setElementPath() in order to associate it for the hit detection.   When a hit is detected, an event is fired,  and all is right in the world.

So what does this mean for game developers?

Well, for user interfaces with stationary interfaces, it will make things a lot easier.  How many times have you wanted to create a simple way to click buttons on a game interface, but had to use the same hit detection routines you wrote for your in-game sprite interactions?  For us? Every time.   For moving sprites in your game though, it might be less useful.    You will have to update the setElementPath() and the fallback DOM element with new coordinate data every time something moves which means triple overhead for game that is probably not accessible in the first place.

Still, this is a good move by the W3C, as making the Canvas accessible for user interfaces is another a huge step in making it more widely accepted for web applications.  We hope these two new methods are added to the specification as soon as possible.





Things We’ve Learned The Hard Way #1: What A Customer Means When They Ask For HTML5

By Steve Fulton


Four HTML5 Canvas Game Demos Running Full Screen On An iPad 2 (video)

By Jeff Fulton

Four HTML5 Canvas games with touch controls running from our web site as full screen apps on an iPad 2. Notice the smooth performance in Mobile Safari. These also run on the Kindle Fire web browser with similar performance.

Music:  "Short Term Memory Lane" by JJ And The Real Jerks.


Don’t Miss Lost Cast: HTML5 Game Development Podcast

I just found  out about this today: Lost Cast: HTML5 Game Development Podcast from the guys over at Lost Decade Games.   They have been creating podcasts since last November, and so far they are really good!  You should go check them out.

This site is protected by Comment SPAM Wiper.