Введение

HTML элемент, элемент HTML

Элемент canvas является частью HTML5 и позволяет динамически, с помощью скриптов, отрисовывать двухмерные фигуры и растровые изображения. Это низкоуровневая процедурная модель, которая обновляет растровое изображение. HTML5 Canvas также используется для создания двухмерных игр. В то время как HTML5 canvas предоставляет собственный 2D API для рисования, он также поддерживает API WebGL для обеспечения трехмерной отрисовки с использованием OpenGL ES.

История

Canvas был первоначально представлен Apple для использования в их собственном компоненте Mac OS X WebKit в 2004 году, обеспечивая работу таких приложений, как виджеты Dashboard и браузер Safari. Позже, в 2005 году, он был внедрён в версию 1.8 браузеров Gecko, а в 2006 году – в Opera, и стандартизирован рабочей группой Web Hypertext Application Technology Working Group (WHATWG) в рамках новых предлагаемых спецификаций для веб-технологий нового поколения.

Использование

Полотно представляет собой область для рисования, определяемую в HTML-коде атрибутами высоты и ширины. JavaScript-код может обращаться к этой области посредством полного набора функций рисования, аналогичного функциям других распространенных 2D API, что позволяет динамически генерировать графику. Среди ожидаемых областей применения холста — создание графиков, анимаций, игр и композиция изображений. Для взаимодействия с холстом необходимо получить его контекст рендеринга, который определяет, будет использоваться API холста, WebGL или контекст рендеринга WebGL2.

Canvas против масштабируемой векторной графики (SVG)

SVG — это альтернативный подход к отрисовке фигур в браузерах. В отличие от canvas, который основан на растровом изображении, SVG основан на векторной графике, поэтому каждая нарисованная фигура запоминается как объект в графике сцены или модели DOM (Document Object Model), который впоследствии рендерится в растровое изображение. Это означает, что при изменении атрибутов SVG-объекта браузер может автоматически перерисовать сцену. Объекты canvas, с другой стороны, отрисовываются в режиме немедленного исполнения. В приведенном выше примере с canvas операция отрисовки прямоугольника изменяет canvas, и его представление в виде прямоугольника забывается системой. Если изменить положение прямоугольника, canvas потребуется перерисовать, включая любые объекты, которые могли быть перекрыты прямоугольником. В эквивалентном случае SVG можно просто изменить атрибуты положения прямоугольника, и браузер определит, как его перерисовать. Существуют дополнительные JavaScript-библиотеки, которые абстрагируют модель canvas, предоставляя возможности, подобные SVG-сцене, внутри элемента canvas. Также можно использовать несколько слоев canvas, что означает, что при изменениях потребуется воссоздать только определенные слои. SVG-изображения представлены в XML, и сложные сцены можно создавать и поддерживать с помощью инструментов редактирования XML. Граф сцен SVG позволяет связывать обработчики событий с объектами, поэтому прямоугольник может реагировать на событие onClick. Чтобы получить аналогичную функциональность с canvas, необходимо вручную сопоставить координаты клика мыши с координатами нарисованного прямоугольника, чтобы определить, был ли он кликнут. Концептуально, canvas — это API более низкого уровня, на котором могут быть построены интерфейсы более высокого уровня (например, поддержка SVG). Существуют JavaScript-библиотеки, которые предоставляют частичную реализацию SVG с использованием canvas для браузеров, которые не поддерживают SVG, но поддерживают canvas, например, браузеры в Android 2.x. Однако, как правило, это не так — это независимые стандарты. Ситуация усложняется тем, что существуют библиотеки графов сцен для canvas, а SVG обладает некоторыми функциями манипулирования растровыми изображениями.

Реакции

На момент появления элемент canvas вызвал неоднозначную реакцию в сообществе веб-стандартов. Высказывались аргументы против решения Apple создать новый проприетарный элемент вместо поддержки стандарта SVG. Также существуют опасения относительно синтаксиса, например, отсутствие пространства имён.

Интеллектуальная собственность на холсте

14 марта 2007 года разработчик WebKit Дэйв Хайат переслал электронное письмо от старшего патентного юриста Apple Хелен Плотка Уоркман, в котором сообщалось, что Apple сохраняет за собой все права интеллектуальной собственности в отношении рабочего проекта WHATWG Web Applications 1.0 от 24 марта 2005 года, раздела 10.1 под названием «Графика: растровое полотно», но оставила возможность лицензирования патентов в случае передачи спецификации организации по стандартизации с формальной патентной политикой. Это вызвало широкое обсуждение среди веб-разработчиков и подняло вопрос об отсутствии у WHATWG политики в отношении патентов в отличие от явного предпочтения консорциумом World Wide Web (W3C) лицензий, не требующих выплаты роялти. Позже Apple опубликовала информацию о патентах на условиях лицензирования патентов без роялти, принятых в W3C. Это означает, что Apple обязана предоставлять лицензию на патент без выплаты роялти всякий раз, когда элемент Canvas станет частью будущей рекомендации W3C, разработанной рабочей группой HTML.

Проблемы конфиденциальности

Canvas fingerprinting – один из методов создания отпечатков браузера для отслеживания пользователей в сети, позволяющий веб-сайтам идентифицировать и отслеживать посетителей с помощью элемента HTML5 canvas. Эта техника получила широкое освещение в СМИ в 2014 году после публикации работы исследователей из Принстонского университета и Университета КУ Левен под названием «Веб никогда не забывает». Обеспокоенность по поводу конфиденциальности, связанная с canvas fingerprinting, заключается в том, что даже удаление файлов cookie и очистка кэша не позволят пользователям избежать отслеживания в интернете.

Поддержка браузера

Элемент поддерживается в текущих версиях Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror, Opera и Microsoft Edge.