Interfaces with HTML5 Canvas/Javascript: Pixel-perfect clicks on canvas objects

Code-free explanation for creating pixel-perfect clickable areas within HTML5/Canvas displays.

Roughly a year ago I was commissioned by a friend to do all the graphic design for his business, a soundsystem/PA build/hire/sales company. The brief, covering a logo, flyers and a website, consisted of those four most magical of words "Do what you want." -so that's what I did.

A personal obsession with clockwork and complex, well engineered mechanical devices led me to decide that I wanted to emulate the look and feel of such an object as the user interface for the website.

Besides animation, such an effect relies heavily on per-pixel interaction. If you can see that a button seems to be attached to the end of a lever, then pressing the lever itself should have the same effect as pressing the button. Also, when the graphic of the selected button moves, it should remain clickable throughout its motion unless visually hidden behind other objects.

This presents a problem; Usually, click detection within a non-interactive graphic would rely on coordinates. When the user clicks somewhere on the display, the code would grab the x/y location of the mouse cursor, then check those coordinates against a list detailing the clickable areas of the display by their individual top, right, bottom and left extremes. This solution works fine until you either have clickable areas ontop of other clickable areas, or clickable areas of irregular shape; -or especially, both.

With overlaying areas, the situation will arise where a user has clicked a location that lies over more than one designated clickable area. The solution to this is to give each area a value to reflect it's depth in the display, so when the user clicks over more than one area the code takes the depth value of all underlying areas and only considers the highest(in value, shallowest in depth) to have been clicked. Now we're storing coordinate values for top, right, bottom and left, along with a depth value for each clickable area. So far so good.

Start using clickable areas of irregular shape though, and our whole setup starts to break. Imagine for example a percentage sign %. We want the crossbar and each of the zeros to be clickable. Using the above method of having a depth value assigned to each object, we end up with something like this:

User clicks crossbar, no problem. However, user tries to click either zero and it will also be recognised as a click on the crossbar, due to the crossbar's overlaying bounding box and higher depth value. We could make sure that smaller objects are at a shallower depth, but the same problem remains:

With both zeros now placed at a higher depth than the crossbar, clicking here will be recognised as a click on the top left zero.

Besides these bounding box annoyances, using depth as an identifier also means having to base the design of the interface upon this limitation of the underlying code.

The solution is colour. When the user clicks an area of the user interface, the colour of the pixel directly underneath the cursor is compared to a list of colours belonging to each clickable area. This allows for precise clicks on objects nomatter what their depth or location happens to be, so we could now click objects through cutouts in overlying clickable objects, if we wanted.