Canvas обработка событий
 

Всем доброго дня! :victory:
Не так давно, мне поставили задачу отрисовать в canvas следующий рисунок:


Это всего лишь пол беды. Рисование canvasов вполне проста и безобидная весчь. Дело в том что все элементы должны поддерживать следующие события:
а) клик мышкой - при клике необходимо выводить сообщение («<наименование элемента>")
б) наведение курсора мышки - необходимо менять цвет элемента.

Итак,начнем с проверки курсора мышки на вхождение в фигуру. Для прямоугольников можно использовать математический метод и определять по координатам курсора, что касается облака, легче всего будет искать его по пикселям,совпадение по цвету.
Я долго думал как реализовать это всё,пришел к следующему выводу.
Хочу описать каждый объект отдельно,создать для него класс и как раз повесить на этот класс события.
Моя проблема в том что я не могу это описать на javascripts, прошу помощи в реализации,набросать примерный код,как это можно реализовать,допустим сначало для прямоугольника,дальше попробую разобраться уже самостоятельно. Буду очень благодарен за помощь.

Чувак, не парься ты так. Есть метод isPointInPath. http://digitalarts.bgsu.edu/faculty/...s/notes26.html

Ух ты...хороший там пример разбирается =)Спасибо за ссылку)
а как вернуть значение элемента при клике?

Сходу не скажу. Попробуй сделать базовй класс Figure со свойством caption. Отнаследуйся от него и при клике делай что-нибудь типа getCaption. Изначальная идея хорошая, короче.

Задача усложняется, а что если рисунок будет вот таким:


Тут уже нужно вызывать метод isPointInPath для определенной фигуры

Может быть лучше векторную графику здесь использовать?
SVG, например?

или обертку, какую-нибудь, типа http://raphaeljs.com/

Можно конечно,но задача была реализовать всё это в canvas