Имеет ли элемент Canvas эквивалент img map, поэтому вы можете определить кликабельные области в элементе canvas?
Кратко упоминается карта, расположенная на половине страницы здесь: http://www.w3.org/TR/html5/the-canvas-element.html, но я ничего не могу найти.
Карты на холсте в настоящее время являются открытой проблемой с HTML5. Выпуск № 105, если быть точным. См. http://www.w3.org/html/wg/tracker/issues/105
Даже если этого не произойдет, не будет ли картинка изображения на прозрачном изображении, расположенном над холстом, получить то, что вам нужно?
Как решение вашей проблемы: я бы привязал событие клика к холсту, и в событии мыши я бы рассмотрел мышиные координаты, а затем простой список областей в сочетании с полигонами, которые вы могли бы выполнить какой-то тест на столкновение на. Прямоугольники были бы началом, но если вам действительно нужны специальные области, вам потребуется сделать более сложный тест на столкновение.
Быстрое решение, которое я использовал во Flash для карт точности пикселей, заключается в создании второго скрытого растрового изображения наложения, которое вы используете для поиска, когда кто-то нажимает на видимое изображение.
Его та же техника использовалась в старых приключенческих играх. Каждая "область/объект/ссылка" имеет свой собственный цвет пикселя. И тогда вы просто сохраняете список объектов с соответствующим цветом.
Как только у вас есть pixelcolor под mousecoord, вы можете очень быстро найти в таблице.. и bingo...
Сначала вы очищаете "изображение клика" нулевым (черным) и равным "без ссылки", затем рисуете каждую область со специальным цветом и сохраняете этот цвет в списке.
Спросите, нужна ли вам дополнительная помощь. Надеюсь, это был полезный ответ.
Считаете ли вы использование svg вместо холста? С помощью svg сама по себе графика может содержать всю информацию, необходимую для идентификации активных областей, и вы можете присоединять обработчики событий так же, как и к html-элементам.
Некоторые примеры того, как вы можете обнаружить мышиные события на разных частях геометрии форм SVG:
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
Взгляните на Cake. Это плагин графика сцены для холста. Возможно, это слишком сложно для того, что вы ищете, но вы можете добавлять события в Cake wrapped canvas objects.