Карта метро Москвы. SVG-версия

При создании игр все эти проблемы давно давным решили…
Дам совет — лучше карту рисовать в буфер и скролиннг реализовывать уже по этому буферу, а не рисовать каждый раз, с отключением текста. :)

Ну это естественно.
LibCanvas, Fabric, Graphics2D, PaperJS хотя бы. Первое, что вспомнилось.
Они общего назначения, есть и специализированные.

Во-первых, потребовалось меньшее количество кода для создания на svg.

Сравниваем:

<rect x="10" y="10" width="200" height="200" fill="red"/>
<path d="M10,10 L200,200 L400,10" fill="blue"/>

Пример для canvas будет на Graphics2d, т.к. я её лучше всего знаю, да и там короче всех, пожалуй:

var rect = ctx.rect(10, 10, 200, 200, 'red');
// либо:
var rect = ctx.rect({ x: 10, y: 10, width: 200, height: 200, fill: 'red' });

var path = ctx.path([[10, 10], [200, 200], [400, 10]], 'blue');

А многие библиотеки (Fabric, например) и SVG-пути поддерживают.

Во-вторых, простота и удобство создания кода. У svg логика строится на отдельных объектах, их свойствах и методах. Например, чтобы определить объект под курсором, нужно создать обработчик события для данного объекта (circle для станций метро), в котором можно поменять его свойства — цвет, масштаб (на картинке для значка станции «Ходынское поле» применен метод scale) и др. У канваса логика отрисовки построена на перерисовке всей карты. И для выделения отдельных объектов нужно перерисовывать и масштабировать всю карту. Кроме этого, канвас не хранит отрисованные объекты в памяти, их нужно отдельно сохранять в переменных (в dbcartajs в объекте mflood) и самому следить за ними (добавлять, удалять). SVG-изображение хранит отрисованные объекты в DOM-модели и к ним можно обращаться напрямую.

Та-даам.

var station = ctx.circle({ cx: 50, cy: 50, radius: 10, fill: 'red', stroke: 'red 2px' });
station.on('mouseover', 'animate', 'stroke', 'blue', 1000);
station.on('mouseout', 'animate', 'stroke', 'red', 1000);

Вот так ещё можно:

station.on('mouseover', function(e){
  this.animate('stroke', 'blue', 1000);
  this.scale(1.3);
});

station.on('mouseout', function(e){
  this.animate({
    stroke: 'blue',
    scale: 1 / 1.3
  }, 1000);
});

В общем-то, на всех 4-х из мною перечисленных это спокойно реализуется.

Ну да, можно выводить растровое изображение пропорционально бОльших размеров, вписывая его в пропорционально меньшую область (и надеясь на точное попадание каждого логического пиксела в пиксел физический — для нештриховой графики сейчас так и приходится делать), но зачем, если можно просто использовать векторную графику, именно для штриховых изображений подходящую идеально и адаптирующуюся под любую плотность точек автоматически и с гарантированным качеством? (Вопрос риторический.)