CODEWITHSUNDEEP
html
Sharuje
Sharuje

Reputation: 3

How to Get a particular area to click in html5?

I created a circle using canvas and divided it into lines. I want the coordinate of a particular area: if I click a particular area, that alone should be clickable.

Take an example of a word wheel game where a circle is divided into many areas with different coordinates and some letters placed inside the divided areas. If I want to click the particular area with the letter 'A', the 'A' should be clicked and should be displayed in a text box.

How do I accomplish this?

Upvotes: 0

Views: 195

Answers (1)

Mitya
Mitya

Reputation: 34566

The elements that form a canvas are not remembered and, thus, are not interactive - as soon as you commit them to the canvas, they are subsumed into the collective. They're not individual elements like DOM elements.

The workaround is to remember the positions of things yourself, listen for clicks to the canvas element, then work out via your own logic what the click landed on.

This is non-trivial. Libraries like Kinetic make it easy. Working with an API such as this will save you a lot of time - like using jQuery for the DOM over vanilla JS.

Upvotes: 1

Related Questions