Как вычислить что курсор «внутри» не прямоугольной фигуры? Допустим на холсте нарисованы прямоугольник, круг и звезда. Как определить что курсор наведен, например, на звезду?
Поясню зачем это нужно: HTML5 canvas не позволяет работать с изображением "послойно", поэтому нет возможности сделать какой-то элемент изображения кликабельным, элемент придется вычислять относительно положения курсора на canvas.Или же лучше не париться и использовать SVG?
Насколько canvas универсальнее svg? Что может canvas и не может svg?

Предыдущий
вопрос Следующий
вопрос

Для определения того, что курсор находится внутри непрямоугольной фигуры на холсте HTML5 canvas, вам придется реализовать алгоритм проверки попадания точки внутрь фигуры. Например, для звезды вам нужно будет проверить, находится ли точка внутри всех лучей звезды.

SVG предоставляет более удобный и гибкий способ работы с векторной графикой, поскольку позволяет создавать и манипулировать слоями и элементами изображения. С помощью SVG вы сможете легко определить попадание курсора на конкретный элемент, так как каждый элемент имеет собственные свойства и идентификаторы.

Однако canvas также имеет свои преимущества, такие как более высокая производительность при большом количестве элементов на холсте и возможность создания сложных анимаций. Кроме того, canvas предоставляет возможность рисовать на холсте напрямую с помощью JavaScript, что может быть удобно для создания динамических элементов.

Таким образом, выбор между HTML5 canvas и SVG зависит от конкретной задачи. Если вам необходима более гибкая работа с векторной графикой или вам нужно определить взаимодействие с конкретными элементами изображения, то SVG может быть предпочтительнее. В противном случае, canvas может быть более удобным вариантом для работы с графикой и анимациями.