Как сделать кликабельный canvas?

Question

[AndRussia]

Здравствуйте. Я уже около часа пытаюсь найти как сделать кликабельный canvas но у меня не выходит. Суть такая: Я нажимаю на круг и у меня появляется скрытый div с контентом. Может есть какая-то документация или что-то подобное. Заранее спасибо.

Я не особо понял как работать с CustomEvent

Comments

[Евгений]

А по событию клика не работает?)

Answer 1

[Robur]

canvas.addEventListener('click', function() { })

Естественно что мышка про круги которые вы нарисовали на вашем канвасе ничего не знает, или вычисляете самостоятельно, или используете svg где круг это отдельный элемент и на него можно повешать свой click обработчик

Comments

[Надим]

SVG тут не нужен, круг легко получить скруглением краёв DIV, а значит просто накладываем невидимый круглый DIV поверх и вешаем на него обработчик клика.

[AndRussia]

Можно как-нибудь выполнить addEventListener не ко всему канвасу, а именно для круга. (Который внизу на скриншоте)

[Robur]

AndRussia, нет, круг существует только в вашем сознании, для браузера весь канвас - большой прямоугольник из разноцветных пикселов.
Получайте координаты клика и вычисляйте, попал ли он в круг или мимо.

[AndRussia]

Robur, а как мне установить его на определенные координаты?
его - клик

[jamtuson]

AndRussia,
1. Получаете координаты центра круга.
2. Получаете координаты курсора относительно начала канваса.
3. Сравниваете: если при клике (координаты_курсора минус центр_круга < радиуса_круга ), то добавляете div

[AndRussia]

jamtuson, а есть какая-нибудь статья? Просто я недавно начал писать на JS, поскольку возникла потребность и пришлось ее решать канвасом.

[Robur]

AndRussia, возможно вам svg лучше подойдет?

[jamtuson]

Bavashi, так кода не видно. Как он его рисует?
Обычно, когда рисуешь круг, то ты сам указываешь координаты центра arc(x, y, .....)