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

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

Удалили акк Upwork с деньгами, что делать?

viacheslav228, их же отправили назад заказчику, попробуй с ним связаться напрямую и объяснить ситуацию, возможно перечислит тебе напрямую.
Впрочем, с твоим красноречием я сомневаюсь в положительном результате.)

Как защитить сайт от прямых ссылок на изображения со вставками изображений на других сайтах?

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

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

практики во фронте у меня мало, поэтому многое по факту уже смотрю, тестирую

Alixx, забавно, я сам нод жс бекендер, поэтому с фронтом тоже много дел не имею.) Так что с этим:

когда до дела дойдёт, только тогда смогу понять, чё подходит, а что нет

полностью согласен.

Чёто сколько сегодня читаю про свг, тем больше он меня пугает.

Меня он тоже пугает местами, честно говоря, но по факту он довольно простой и лаконичный. Path непростой, да, но есть лайфхак, как получить легко и быстро все точки необходимой области. Когда дойдёшь до этого, расскажу, а то там много расписывать, а сейчас мне лень.)

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

Foint

Alixx, опечатка же.)

Почему же здесь так же не получится?

Если так, то да, но тогда, имхо, лучше сделать наоборот, свг держать дисплей нон и когда надо диплей блок/флот/что угодно. Причём можно сделать визабилити хайден или опасити 0, чтобы даже теоретического мерцания не было.

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

Почему? А elementfrompoint разве не подойдёт?

Возможно, я чего-то не понимаю, но каким образом он может вообще подойти? Канвас же будет на переднем плане. Разве что elementsFromFoint, но если нужен эвент на ховер, то эта операция на моусмув будет достаточно ресурсопрожорлива, хотя здесь могу ошибаться.

Но! Не получится для фона загружать картинки целиком - они весят десятки мб и размером 20000х10000px (примерно пишу). Не каждый слабый комп/ноут такое потянет. Поэтому такие картинки нарежу на квадраты и буду подгружать по мере надобности.

Разумно. Так же предложу дополнительно сжать изображения, до 90-95%, если речь о жпг, глазом не отличишь от оригинала.

А как с свг? Его можно загрузить целиком, да, но спозиционировать и уменьшить масштаб под текущий размер фона можно?

Естественно.

Как собрать из массива объект, разбивая каждый элемент массива на ключ/значение по разделителю "="?

Или map + Object.fromEntries.

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

даже для рисования можно поверх всего канвас налепить и по нему рисовать путь

Alixx, можно и так, конечно, но есть важный нюанс: если канвас будет перед свг, то выделить свг курсором будет невозможно. Именно поэтому я и писал про альтернативу рисования пути через свг.

И как быть с передвиганием карты?

Тут как раз вообще нет проблем, будет 1 большой свг с множеством элементов внутри. Достаточно будет просто сдвигать свг. Или же просто использовать стандартные полосы прокрутки.

И ещё вопрос, т.к. с свг я никогда не работала, если в фоне показана часть картинки, то нужны и только части свг, соответствующие для этой части фона. Часть фона показать просто с css, а часть свг показать можно?

Я не думаю, что возникнут проблемы с производительностью, а значит ничего не мешает сразу отрендерить весь свг. По сути, это дом, часть дома будет за границами экрана, что абсолютно нормально.

В целом, если что, пиши сюда, мне самому интересно, если найдутся какие-то неприятные (или приятные) нюансы, которые я пропустил.

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

нельзя рисовать путь как в paint

Alixx, до сих пор не могу понять зачем это надо, но ладно.
Есть полилайн: https://www.w3schools.com/graphics/svg_polyline.asp
Если нужны кривые, то тогда путь, но он сложнее: https://www.w3schools.com/graphics/svg_path.asp

И прямой доступ к объектам через инструмент. Т.о. можно просто в стилях объектов менять их места, удалять и менять как угодно.

И каким же образом это является минусом? Вернее это минус, только канвас от него вообще никак не спасает, как и всё, что находится у клиента.
Во-первых, все данные, с которыми будет работать код у клиента, будет, внезапно, в самом коде. То есть изменение дома приведёт лишь к визуальным изменением у клиента, не более.
Во-вторых, всё, что не относится к отображению информации, должно выполняться на сервере.
В-третьих, на сервере должна проводиться полная проверка валидности действий, поскольку клиенту ничего не мешает отправить запрос серверу через тот же fetch, вручную прописав всё, что он хочет.

Иными словами, реализация фронка никаким образом не повлияет на реализацию бека, при любой реализации необходимо будет делать одни и те же проверки.

И будет постоянная динамика - одновременное движение и героев других игроков и их круги обзора

Это всё статика (почти). Обзор всё равно завязан на иконке/фигурке игрока и с свг будет достаточно перемещать весь элемент героя со всем, что к нему относится.
Единственное "но": если объекты надо перемещать с разной скоростью, то реализацию надо будет писать самому. Или искать готовую. Но в канвасах её итак и так придётся реализовывать.

анимация разных объектов и природы (напр., течение воды).

У меня большие сомнения, что ты собираешься реализовывать детализированную анимацию с кучей кадров. То есть всё это можно реализовать через видео/таймауты, но тут надо смотреть, конечно.
В любом случае никто не мешает использовать анимированный канвас на фоне прозрачного элемента свг.

И про динамику ты неверно меня поняла. У тебя динамики будет минимум. В большинстве текущих браузерных игр канвас необходим, т.к. каждый следующий кадр будет практически новым, а у тебя есть карта, которая сама по себе статична. Объекты на карте большую часть времени тоже статичны.
На выходе у тебя получится статичная игра с элементами динамики, а ты в первую очередь смотришь на динамичные игры с элементами статики, что в корне неверно.

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

Alixx, что за абсолютное непонимания, что каждой технологии своё место?
Хорошо, давай взглянем на https://surviv.io/, вся игра на канвасе, кроме, внезапно, всех кликабельных элементов, они на дивах.
Искать схожий пример мне лень, поскольку абсолютное большинство браузерных игр вообще не имеют кликабельного интерфейса непосредственно во время игры.
Канвас нужен при постоянной динамике, тебе же нужна практически статичная сцена со множеством кликабельных элементов сложной формы. Так скажи мне, зачем тебе в таких условиях канвас? В 99% играх позиция мыши использует лишь для расчёт направления? И это очень простая операция, в отличии от расчёта пересечений с объектами сложной формы.

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

Как исправить выведение [object Object] из функции?

for (const x = 0; x <= n; x++)

На этих строчках у вас дичь какая-то.

Как найти пересечения элементов в массиве?

Роман Якимчук, спасибо, хорошая статья, только её стоило прочитать и вам:

However, I should be aware of what are the constraints of the software I’m writing. If I knew the list would accommodate a few pairs of elements and never grow in size, and if the sequence is in the heart of a process that potentially can block the render thread for too long, I would put more thinking on it.

Отличное уточнение, которое как раз под ваш случай.

Как найти пересечения элементов в массиве?

Роман Якимчук, подобные мелкие оптимизации вообще-то делаются на автомате в процессе написания простейшего кода, так что нет, я не придираюсь.

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

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

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

Рисовать путь надо "как в paint",

Alixx, зачем? Это довольно сложная и очень бесполезная реализация в рамках данной задачи. Тебе достаточно фиксировать по каким объектам свг прошёлся курсор во время указания пути.

т.е. обычные прямоугольные элементы, которые своими краями будут перекрывать другие элементы.

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

У пользователя есть прямой доступ ко всем элементам через инструмент разработчика.

И?

Плавной последовательной анимации не сделать - только то, что может css + js.

Эм, а что мешает? Более того, с учётом того, что это часть дома, транзишн на элементы свг также прекрасно воздействует, в то время как на канвасе всю плавность придётся реализовывать самой.

Получается как-то ещё более загонно, чем на канвасе.

Канвас 2д ─ это достаточно низкоуровневые операции, в следствии чего множество желаемых эффектов придётся воплощать самостоятельно.
Так что если есть такое большое желание поработать с канвасом, то готовься страдать.)

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

Alixx, ничего не мешает делать всё тоже самое через свг.
Вот сайт по созданию структуры БД, полностью на свг: https://nosqldbm.ru/

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

Alixx, в данном случае можно полностью всё сделать на свг.
Собственно, мне неясно что тебе неясно из скинутых мной ссылок? Карту можно на бекграунд поставить, но лучше разрезать и в свг запихнуть фоном запихнуть. Хотя можно и неразрезать, а просто цссом смещать картинку в нужную позицию.
Впрочем, чтобы сгенерировать path для свг стоит разметить области и далее пнгшку в свг конвертировать.

Как найти пересечения элементов в массиве?

return [...list, [from, to]];

Роман Якимчук, серьёзно? На каждой итерации пересоздавать массив?

Как из объекта получить 5 свойств с наибольшим весом?

alex4answ, но мой вариант скорее к лаконичным относится, если нужна скорость, то как минимум, скорее всего, надо будет от сорта отказаться, но не факт, потому что он, очевидно, хорошо оптимизирован и собственноручное решение банально может оказаться хуже.
Впрочем, ещё всё очень сильно будет зависеть от количества ключей в объекте.

Как сократить код JS?

Василий Банников, дык там неважно, что лежит, конструкция ТСа найдёт ту же ноду, что у него есть, там нету опция найти чт-то другое.