Каким образом лучше реализовать карту на canvas?

Есть разные локации, для каждой локации есть своя картинка в jpg размерами от 3440*1440 (есть и в 10 раз большего размера картинки), на каждой картинке есть свои области для взаимодействия (можно ходить, доп. действия и пр.). Области имеют разные формы, не стандартные фигуры (прямоугольники, круги и пр.).
Также на карте нужно отображать героя игрока, различные объекты, героев других игроков. А также, игроку, чтобы перемещать своего героя по карте, нужно рисовать путь. При этом нужно отслеживать, через какие области для взаимодействия проходит путь (и соответствующе реагировать на это).

Подскажите, какой лучший вариант решения для отслеживания, над каким объектом на карте находится курсор?
И при этом, чтобы этот вариант мог обеспечить хорошую производительность, с такими-то огромными картинками?
Знаю про такие варианты:
1. Для каждой картинки сделать такого же размера картинку png, на которой обрисовать индивидуальными цветами все нужные области. На странице ставить два элемента canvas, один под другим, на нижнем отрисовывать png, а на верхнем (который и будет виден игроку) – jpg. И по координатам курсора определяем цвет на нижнем – так можно определить область.
2. Тот же принцип, что и в 1, только вместо закрашивания полностью цветом, обрисовывать области путями svg. А на странице для координат курсора определять, входят они в какой-либо из путей или нет.
2. Для каждой картинки составить и хранить в файле на сервере массив координат пикселей с соответствующим номером области. На страницу игроку подгружать картинку локации и отправлять сохранённый массив координат – легко определяем области. Но остаётся тот же вопрос для динамических объектов..
3. Возможно есть подходящие библиотеки для всего этого? Если есть, то какие?
Что думаете насчёт них?

Насчёт огромных картинок, думаю порезать каждую на несколько меньшего размера, и подгружать нужные из них, когда координаты героя окажутся близко к краям холста. Или есть вариант лучше?

0