Новые фичи Canvas 2D APIРазработчики Chromium некоторое время работают над нововведениями в Canvas 2D API, и это самое большое расширение API с момента его стандартизации. О новинках хорошо рассказано в
видео и
git репозитории, где представлено описание (explainer'ы) для каждого из расширений. Ключевые направления расширений:
- Паритет по функциям с другими 2D API;
- Доступ к возможностям Web/CSS;
- Улучшение производительности.
На данный момент в Chromium реализовано 9 фич:
-
Reset function – метод reset(), который очищает канвас, текущий путь и стек трансформаций. Не понятно, почему его не было раньше. Позволяет избежать хаков и проседания производительности.
-
Color input – добавляет возможность использовать экземпляры CSSColorValue и массивы чисел как значения цвета (сейчас можно использовать только строки).
-
Text modifiers – аналоги CSS свойств letter-spacing, word-spacing, font-variant-caps, font-kerning, font-stretch и text-rendering.
-
RoundRect – прямоугольник со скругленными углами, что-то вроде CSS border-radius.
-
Conic Gradient - аналог CSS conical-gradient()
-
Perspective transforms – трансформации с перспективой. На самом деле, сводится к поддержке матриц трансформации 4x4.
-
Modern filters – сейчас в канвасе доступны
SVG фильтры. Но пользоваться ими неудобно и к тому же они не доступны в воркерах (так как там нет DOM и, соответственно, SVG). Это расширение повторяет SVG фильтры, но в виде JavaScript API.
-
willReadFrequently – опция при создании 2d контекста, которая сигнализирует браузеру, что будет активно использоваться getImageData() и браузер может это оптимизировать (как хранить). Сейчас браузеры эвристически решают будет ли активно использоваться getImageData() или нет, что является не надежным и сложным решением.
-
Canvas context loss – позволяет браузеру освобождать ресурсы выделенные под контекст, когда канвас не используется (например, за пределами вьюпорта) и добавлять реакцию на восстановление контекста (начать отрисовывать, когда канвас возвращается во вьюпорт).
Еще около 7 фичей находятся на уровне идей.
В середине апреля было
объявлено о начале экспериментов в Chrome. Новое API доступно за флагом new-canvas-2d-api (
chrome://flags/#new-canvas-2d-api). Разработчики других браузеров в целом относятся позитивно к новым фичам, но есть вопросы по некоторым из них. В Firefox уже ведут разработку, Edge помогает с имплементацией в Chromium, насчет Safari пока информации нет.
