Александр Коротаев

Думаю, что CSS transform: translate() будет работать немного быстрее, это раз.
Можно переставать рисовать во время перемещения, это 2.
Можно попробовать отключить pointer-events в css.
Но главный момент - чем больше локация, тем больше будет фризов, от этого никуда не убежать, пока не начать рисовать на canvas в размер экрана, (время доступа к бОльшим ресурсам всегда больше). Как перерисовать тайловую карту быстро сохраняя плавное перемещение карты? Можно глянуть на реализацию яндекс-карт, там карта рисуется чуть больше экрана на величину тайла, плавно сдвигается трансформацией и рисуется лишь новый край при смещении более чем на 1 тайл. В профиле есть, почта, пиши, могу разъяснить чуть подробнее.

Я бы выбрал D3.js готового решения для вашего дизайна 1 в 1 может и не найтись, а тут можно с нуля много чего сделать, вот например соединить эти примеры https://www.google.ru/webhp?sourceid=chrome-instan...
то вполне получится то что на картинке

Я так полагаю тут суть в передаче заказа на печать, а значит нужно приемлемое качество, а значит base64 отпадает сам собой (генерация base64 для формата А4 вызовет зависание на клиенте). Манипуляций тут не так уж много потому можно просто передавать их как обычную форму а финальное изобаржение строить уже на сервере, можно даже с серевера и превью отдавать, чтобы не поддердивать 2 типа визуализации

Можно выбрать что-то из примеров и кастомизировать,
вот прямо готового решения на все случаи жизни не найти
https://jsplumbtoolkit.com/
gojs.net/latest/samples/index.html

Я бы сначала поработал бы над расчетами, а потом пытался фиксить все "волшебной палочкой" WebWorkers

Я думаю, что тут надо убрать из отрисовки все расчеты, например цикл lineTo можно расчитать отдельно и сделать из этого path2D и отрисовывать уже его https://developer.mozilla.org/en-US/docs/Web/API/P...

После этого сразу уйдет трансформация, как ненужная, тем более save() - restore() довольно дорогая операция, если хочется быстродействия

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

codepen.io/anon/pen/yaokzo?editors=1010 - готово, что было сделано:
загрузка картинок через промисы
когда промисы отработали, запуск отрисовки
код рисования кругов заменил на рисование картинок

Есть порт популярного движка Box-2d на JS, там реализовано взаимодействие физических тел на основе выпуклых многоугольников. Думаю, это подойдет.

А если с нуля, то использовать векторы ускорения и обнулять значение при столкновении
Апдейт смещения объекта должен руководствоваться этими векторами для расчета позиции объекта