To help solve this issue, the Canvas needs some way to associate sub dom elements with
an area on the bitmapped 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 accessi‐
bility tools—for example, 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 appears to be 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 the fallback
DOM element 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 developers?
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 interac‐
tions? (For us? Every time.) However, for moving sprites in your game, it might be less
useful. You will have to update the setElementPath() method and the fallback DOM
element with new coordinate data every time something moves, which means triple
overhead for a game that is probably not accessible in the first place.
Still, this is a good move by the W3C, because making the Canvas accessible for user
interfaces is another 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. The
good news is, as of December 2012, the “Hit Testing Proposal” has been incorporated
into the specification for the next version of Canvas, dubbed Canvas Level-2.
use to render and control HTML5 Canvas on an HTML page. In the next chapter, we
will take this information and expand on it to create an interactive application that uses
the canvas to render information on the screen.
What’s Next? | 33