What is the best way to implement such a map on canvas?

Question

JavaScript

There are different locations, each location has its own picture in jpg sizes from 3440 * 1440 (there are also 10 times larger pictures), each picture has its own areas for interaction (you can walk, additional actions, etc.). Areas have different shapes, not standard shapes (rectangles, circles, etc.).
Also on the map you need to display the player's hero, various objects, heroes of other players. And also, the player, in order to move his hero around the map, needs to draw a path. At the same time, you need to keep track of which areas for interaction the path passes through (and respond accordingly).

Tell me, what is the best solution for tracking, over which object on the map is the cursor?
And at the same time, so that this option can provide good performance, with such huge pictures?
I know about such options:
1. For each picture, make a png picture of the same size, on which draw all the necessary areas with individual colors. Put two canvas elements on the page, one below the other, draw png on the bottom one, and jpg on the top one (which will be visible to the player). And by the coordinates of the cursor we determine the color on the bottom - this is how you can determine the area.
2. The same principle as in 1, but instead of painting completely with color, outline the areas with svg paths. And on the page for the cursor coordinates to determine whether they are included in any of the paths or not.
2. For each picture, create and store in a file on the server an array of pixel coordinates with the corresponding area number. Upload a location image to the page for the player and send the saved array of coordinates - it is easy to determine the area. But the same question remains for dynamic objects..
3. Perhaps there are suitable libraries for all this? If yes, what are they?
What do you think about them?

As for the huge pictures, I'm thinking of cutting each one into a slightly smaller size, and loading the right ones when the hero's coordinates are close to the edges of the canvas. Or is there a better option?

Answer 1

In order not to have trouble with cursor tracking, I advise you to use svg:
How is an interactive map implemented in JS?
How to make an interactive svg map with your wordpress design?