Разработчики 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 пока информации нет.