Obiekty w JS / Canvas - zdarzenie onClick

Question

Witam,

Jak nadać zdarzenie typu onClick dla obiektów stworzonych w canvasie ? Powiedzmy rysuję w nim kwadrat i gdy kliknę w kwadrat chciałbym aby zmienił kolor jak tego dokonać ? Wyliczanie dokładnych pikseli itd. aby znać pozycję danego obiektu jest bezsensowne i nieprawidłowe moim zdaniem (może się mylę). Co do zmieniania koloru to nie jest jedyne co chce uzyskać, chciałbym również bardziej zaawansowane rzeczy w tym zrobić, lecz musiałem podać jakiś przykład.

Answer 1

W przypadku canvas właśnie konieczne jest analizowanie pozycji kursora względem pola canvas. Jeśli chcesz robić zaawansowaną interakcję to zastanów się czy nie lepsze byłoby svg? canvas jest w pewnym dużym uproszczeniu jak jedna bitmapa, coś jak paint - nie masz kwadrata, koła itp. tylko po stworzeniu elementu masz piksele.

Comments

Dziękuje za radę, poczytam z czym się je svg

Answer 2

Tutaj masz odpowiedź na samym dole: https://www.w3schools.com/html/html5_svg.asp

W przypadku canvas nie ma wbudowanego systemu onClick dla konkretnych narysowanych elementów, ponieważ nie są one osobnymi elementami DOM.
Jeśli chcesz możesz napisać na to własną funkcję, która będzie pobierać koordynaty kliknięcia i porównywać do do koordynatów wszystkich narysowanych obiektów.