How to determine if touchpoint is within a given canvas object's area?

Question

https://code.sololearn.com/WI4zXIFuCCuL/?ref=app

What this code snippet does is basically it attaches event listener to a specific canvas area. But the more objects on canvas you have the larger and unmaintainable code becomes. Is there any better approach to this?

Answer 1

I've rewriten your code to give you a base to extend as you need:

https://code.sololearn.com/W797u08XZN99/?ref=app

(you could add a color property to the object, and use it to fill the rect, as example, and add as many area you want)

Answer 2

Take a look at how I implemented touch:
https://code.sololearn.com/Wmn12u8TO24p/?ref=app

Answer 3

make it a button with onclick

Answer 4

Vasiliy Thank you. Really helpful example.

Answer 5

Because to be honest I'd rather write everything in js (even if it gets quite long) than jumping between horrible html css and stuff like that, if you know what I mean 😅

Answer 6

No offense tho html and css lovers 🤣

Answer 7

no downside, even better ^^
but if you call an addEventListener in a loop like (as you seems to try, even if you actually don't), then you will got problems ;P

the correct solution would be to define the event listener once, and then do your loop logic independently...

however, to handle many touch area inside a canvas, I will advise you to do it through a loop wich will test an array of area coordinates, rather than repeating code, nor define one event listener for each area ;)

Answer 8

visph Thank you for advice.

Answer 9

Yeah....js and its derivatives can only be topped by elm.

Well...that was a bit fun although not completely wrong.
You are on a good way.

Answer 10

Frogged visph Vasiliy Thank you very much guys. Appreciate your help.

Answer 11

Artur:
— "Are there any downsides or advantages of implementing touch event control through html&css&js over pure js?"

It all depends on the goal pursued and the task at hand.

Consider my code not as a reference solution, but as a tutorial for demonstrating certain actions in different ways.

Answer 12

The best solution lies in your question: "Create an object constructor in which you describe the desired property once and calmly create at 1000 new objects"

Answer 13

Vasiliy Frogged Are there any downsides or advantages of implementing touch event control through html&css&js over pure js?