Hilfe/Frage Wie - Punkte auf einer Zone setzen welche dann gehighlightet werden

[besercer]

Guten Tag liebe Community,

habe folgendes Problem und hoffe ihr könnt mir helfen.

Ich habe ein paar Zonen , auf die ich ein Start und ein Endpunkt setzen soll zwischen die eine Linie gezeichnet werden soll. Die Zonen, durch die die Linie geht sollen dann gehighlightet werden.
Wie würde ich sowas am besten umsetzen? Mir fällt es alleine schon schwer das ganze in Worte zu fassen aber ich hoffe ihr könnt mir folgen und wisst was ich versuche zu erklären.
Wird das ganze per Canvas gemacht oder über normale Div´s oder unter welchen Schlagwörtern sollte ich Googlen? Bin etwas ratlos.

Vielen Dank für die Hilfe schonmal
Gruß besercer

 

[kkapsner]

Sind die Zonen immer konzentrische Kreise oder können das auch beliebige Formen/relative Positionen sein?
Bei konzentrischen Kreisen ist das Problem mathematisch einfacher (du musst in Polarkorrdinaten den minimalen und maximalen Radius der Koordinaten auf der Geraden ausrechnen, was keine Hexerein ist, und dann alle Zonen mit den Radien dazwischen selektieren).

Sowas kannst du mit Canvas machen, würde ich jetzt aber mit normalem DOM realisieren.