На картинке — глупенькая красавица отдаёт чудовищу учётную запись пользователя.

В одной стране жила была старая некрасивая система администрирования для школ, написанная на Classic ASP. Ею пользовались все учителя, ученики, а так же их родители. И в один прекрасный солнечный день её решили модернизировать. На смену уже устаревшей технологии должна придти современная ASP.Net MVC 5 с новым дизайном.
Однако в одночасье переписать все 6000 asp файлов не представляется возможным, какое-то время старая и новая система должны существовать параллельно.
И вот спустя полгода новая сверкающая (хотя кое-где всё таки проглядывает ржавчина и заплатки, ибо сроки) система приняла первых пользователей.
Следующим шагом необходимо было применить технологию единого входа (SSO) для пользователей, чтобы каждый мог свободно перемещаться между пока ещё глупенькой красавицей и полнофункциональным чудовищем.
Кроме того, одна из крупнейших систем управления обучением (LMS) захотела иметь тесную интеграцию с нашей системой администрирования, включая в себя SSO.

Введение

Заказчиком была поставлена следующая задача – показывать на картах торговых центров статистику по посещаемости магазинов, использованию эскалаторов, лифтов и коридоров. Карту нужно уметь размечать — указывать точки, где показывать статистику и какую конкретно статистику. И, естественно, показывать эту статистику для выбранного периода времени и фильтров. Откуда берутся и где хранятся данные – отдельная большая тема, за скобками данной статьи.

Раз плюнуть, скажете вы – берём векторную карту торгового центра в svg и дополняем её данными. Красиво, современно, быстро. Даже есть готовые решения типа jVectorMap.

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

Поэтому было решено использовать HTML5 canvas и для разметки карты, и для показа данных.

Выбор фреймворка

Работать напрямую с canvas API не очень удобно, но уже понапридумана куча инструментов для облегчения работы. Требования к фреймворку в нашем случае:

1. Объектная модель поверх canvas API.
2. Способность отрисовывать и масштабировать картинку.
3. Интерактивность:
   
   • возможность манипуляции объектами на этапе разметки карты,
   • возможность масштабирования и перемещения по карте.
4. Возможность экспорта/импорта размеченных объектов.
5. Наличие детализированных событий.
6. Высокая скорость отрисовки.

Под рассмотрение попали fabric.js, EaselJS, Raphaël, Paper.js и Processing.js.
Всем требованиям удовлетворяет fabric.js. Учитывая имеющийся небольшой опыт работы с ним, было решено взять его за основу. Далее в примерах использовалась версия 1.4.4.