Работа с Canvas и Paper.js на проекте Qatar Airways

Сергей Пестов,

Ведущий фронтенд-разработчик

15.08.2013

Хочу рассказать немного про мой опыт работы с Canvas. Нюансов много, но я бы хотел остановиться на подготовительных моментах. В проекте, над которым я в настоящий момент работаю, потребовалось создать картинку, которая является результатом выбора пользователем нескольких опций. Для этого я использовал Paper.js — библиотеку для работы с Canvas-графикой.

В таких проектах удобно разрабатывать Canvas-функциональность отдельно от основного проекта, для которого эта часть предназначена. Это позволит не дожидаться готовности серверной части, а на какой-то стадии готовности просто встроить ваш компонент. У меня это был просто HTML-проект. Его можно было даже в репозиторий добавить. С какого-то момента все исправления я стал вносить уже в общий проект.

Требуйте четких инструкций и разъяснений по дизайну. В моём случае после долгой переписки появился конкретный styleguide для моего компонента, который во многом облегчил реализацию.

Нужно сразу согласовать с дизайнерами точные размеры всех готовых картинок. Я, к примеру, до последнего не знал, что облака на заднем плане будут включаться в готовую картинку или что для facebook-шаринга нужны картинки больше, чем 810 px. В общем, всё, в чём вы сомневаетесь, нужно уточнять и переуточнять, даже если уже сделали это в начале проекта.

Ассеты: для правильного отображения шрифтов и картинок, используемых в Canvas, все они должны быть загружены к моменту инициализации Canvas.

Шрифты: если сайт будет портирован на несколько языков, заранее проверьте, что шрифт содержит специфические языковые глифы (например немецкие умляуты), иначе получится так:

Символы с умляутами «выпали» из шрифта — получилось очень некрасиво

Для отслеживания момента загрузки шрифтов я использовал Web Font Loader. Здесь все достаточно просто:

создаем fonts.css, куда добавляем все шрифты, которые нужно загрузить;
подключаем font loade;
вызываем собственно загрузчик;

Картинки тоже должны быть загружены, иначе на Canvas они не появятся. Делаем это достаточно просто: создаем скрытый Div и кладем туда все картинки. Затем с помощью ImagesLoaded проверяем, все ли картинки загрузились и если да, то стартуем ImagesLoaded.

В следующий раз постараюсь рассказать непосредственно про сам проект и в большей степени про Paper.js.