Полноценные события мыши на графических элементах Canvas

[Zibx]

И тут приходят две фигуры одного цвета и всё ломают.

[midday]

Здесь цвет — айдишник. Уникален для каждого элемента.

[NickyX3]

Он уникален для 1 миллиона элементов в вашем случае
Что делать если элементы двигаются? Перерисовывать фон при каждом движении?

Для многих применений можно смело заменять canvas на svg загруженный прямо в DOM и вешать эвенты на элементы svg

[Agent_J]

Почему 1 миллиона? 255^3

Что делать если элементы двигаются? Перерисовывать фон при каждом движении?

В большинстве случаев больше времени занимает вычисление что и куда двигать, а не отрисовка холста.

Для многих применений можно смело заменять canvas на svg

Это уже холивар

[Zibx]

Это задача, которую надо решать математикой. Что толку от того что мы кликнули по фигуре, если мы не храним её данных? Мы не сможем двигать фигуру. А если мы хотим залить фигуры текстурой, или сделать полупрозрачными, а на фон кинуть картинку пляжа? Вот есть чудесная библиотека, которая это всё умеет.

[Xnoyer]

Я ведь потому и написал что реализация событий, а равно хранения данных и прочего здесь не рассматривается из-за огромного количества вариантов. И извините, но вы неправы, заливайте фигуры чем хотите, делайте полупрозрачными, двигайте ее, при этом на фоновом холсте всегда рисуется непрозрачная фигура той же формы, но другого цвета (цвета ее идентификатора). Подробнее о движении — mouseDown отследить таким способом очень просто, далее просто перестаем искать пиксели и перерисовываем нужные места, двигая вашу фигуру как вам угодно.
И еще — эта библиотека может быть сколь угодно замечательной, так жк как и Kinetic и OpenLayers, описаный в источнике. Я не предлагаю свою библиотеку, я описываю концепцию, которая во многих случаях чрезвычайно удобна. Кстати очень может быть что в этих библиотеках использован именно такой подход.
Спасибо за внимание к моей статье.

[Zibx]

Там использованы честные функции пересечения многоугольника\кривой с точками. То есть место на хранение X*Y*4 байт у нас есть, а на хранение векторных данных о фигурах нету? Какой смысл в том что бы найти идентификатор, если мы не знаем ничего о фигуре, по которой кликнули?

Подробнее о движении — mouseDown отследить таким способом очень просто, далее просто перестаем искать пиксели и перерисовываем нужные места, двигая вашу фигуру как вам угодно.

Откуда мы знаем что перерисовывать, если мы не сохраняем данных о фигуре?

Есть метод, близкий к методу описанному в статье. Классический поиск пересечений по битовым маскам. Но он выглядит несколько иначе. На каждую фигуру заводится 2д однобитный слой. Если в пикселе есть фигура, то там true, иначе — false. При клике в точку начинается перебор в цикле с конца всех имеющихся слоёв. Если layer[y][x] == true => return layer. В частности в windows раньше так был сделан поиск окна произвольной формы, по которому кликнули (сейчас не знаю как оно устроено, давно в winApi не смотрел).

[Xnoyer]

Еще раз повторю — хранить вы можете какие угодно данные о фигуре ассоциативно по тому же идентификатору, и перерисовывать имея ее координаты, форрму и т.д. Статья не затрагивает эти моменты, затрагивается только обработка событий. Кстати создание 1 дополнительного слоя на каждую фигуру хоть и избавит от ограничения по количеству в ~16 миллионов, но работать перестанет после первой тысячи

[NickyX3]

Это уже холивар

Ну почему же? Я написал «для многих», но далеко не для всех. К примеру разнообразные геоинформационные штуки таки проще и удобнее сделать как раз в svg, а сильно динамические штуки или игры на canvas. Svg как и canvas не панацея от всего

[Agent_J]

Но тут-то статья про canvas вне контекста применения, так что упоминание svg не совсем уместно.

[kolyuchii]

Гениально!

[Rastishka]

Все новое, хорошо забытое старое.

Я таким образом лет 10 назад на чистом OpenGL делал отслеживание клика на 3D объекте. Там тоже был буфер, в который рисовались 3D модели с учетом Z буфера, но однородным цветом.