xmoonlight

Канвас с изометрической сеткой и со спрайтами-ромбами (+окошко общего плана в уголке).

ctx.lineCap = 'round';
тут всё по теме.

Есть минимум 4 асинхронных(параллельно обрабатываются!) цикла получения данных.
1. Сигнал синхронизации: "стук сердца" (heart-beat).
2. Локальный: только расчёты.
3. Визуализация/Рендеринг: FPS.
4. Сетевой обмен данными: мультиплеер.

Всё считается отдельно и независимо друг от друга!
Самый главный - это синхросигнал (п.1).

НО! Также, есть допуски у всех уровней, что ниже, которые устанавливают допустимые критерии оптимизации и поддерживают корректную синхронизацию и античит.

Все на сервере делаем на нативных сокетах!
И, чтобы НЕ гонять лишний трафик в JSON-формате через WebSocket, советую использовать websockify или engine.io (от разработчиков socket.io).

Дальше - апроксимация движения объектов и лаги... Это будет ещё интереснее)))

1. тут
2. + отличный урок (публикация): всё по шагам расписано!

1. Расширять динамически канвас (холст), когда объект перетаскивается за границы, но не давать объекту скрыться (расширять на величину не более 80% от ширины или высоты, например).
2. На канвас, сверху, наложить "ширму": слой c "прозрачностью" (pointer-events) для событий мыши (и с прямоугольником в центре - видимая рабочая область в канвасе): pointer-events: none; Тогда при выделении, того, что находится под слоем-"ширмой", видно не будет, но границы области выделения будут растягиваться (событие выделения объекта) за этим слоем-"ширмой". Т.е., будет работать так, будто всё видно.

Здесь все варианты pointer-events.

Всё просто.
Чтобы снять скрин - нужно время: T1
Чтобы перерисовать сцену/объект - нужно время: T2
А вот чтобы сделать копию региона canvas - нужно время T3.
Подытожим: T1>T2>T3

Чтобы снять быстро скрин, нужно:
1. Получить нужный регион из визуальной сцены (игрового canvas'a) в переменную
2. Создать новый объект канваса в памяти (без помещения в DOM!)
3. Скопировать в него изображение из переменной
4. Сохранить куда нужно

Копирование - тут.
После того, как заберёте фрагмент - сразу переходите в асинхронный режим, передав сохранение воркеру. Ну и каждый кадр сохранять (60fps) - не советую, если это возможно.

https://www.adobe.com/ru/products/animate.html
Что-то упрощённо - сделать можно тут: bouncejs.com
(или всё руками через Javascript и Canvas)