Does (HTML5) Canvas have the equivalent of an image map?

Question

Does the Canvas element have the equivalent of img's map, so you can define clickable areas on the canvas element?

There is brief mention of a map halfway down the page here: http://www.w3.org/TR/html5/the-canvas-element.html, but I can't find anything else about it.

Answer 1

Even if there isn't, wouldn't an image map on a transparent image positioned over a canvas get you what you need?

Answer 2

Maps on Canvas are currently an open issue with HTML5. Issue #105 to be precise. See http://www.w3.org/html/wg/tracker/issues/105

Answer 3

Have you considered using svg instead of canvas? With svg the graphic itself can contain all the information you need for identifying active regions, and you can attach event handlers just like you would on html elements.

Some examples of how you can detect mouseevents on different parts of the geometry of svg shapes:

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-08-f.html

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html

Answer 4

As a solution to your problem: I would attach a click event to the canvas and in the mouse-event I would examine the mouse-coords, then a simple list of areas combined with polygons you could do some sort of collision test on. Rectangles would be a start, but if you truely need special areas, a more advanced collision test would have to be made.

A quick solution I have used in Flash for pixel precision maps, is to make a second hidden overlay bitmap, that you use for lookup when someone click on the visible image.

Its same technic used in old adventure games. Each "area/object/link" has its own pixel color. And then you just keep the list of objects with the matching color.

Once you have the pixelcolor under the mousecoord, then you can do a very quick lookup in the table.. and bingo...

First you clear the "click image" with zero's (black) and thats equal to "no link", then you draw every area with a special color and store this color in the list.

Ask if you need more help. I hope this was a usefull answer.

Answer 5

Take a look at Cake. It's a scene graph plug-in for canvas. Might be a little too complicated for what you're looking for, but you can add events to Cake wrapped canvas objects.