CANVAS настолько нестандартный html-тег, что с ним почти никто не работает, да и знают его не многие. А всё из-за специфичности его использования. Он ведь предназначен для создания графики. И не так уж много проектов используют CANVAS в своём интерфейсе.
Сам по себе тег CANVAS устроен таким образом, что внутри него указывается текст, который будет отображаться, если браузер не поддерживает эту технологию. При этом, если браузер поддерживает CANVAS, то вы увидите пустое белое пространство с размерами, указанными в CSS-свойствах. Создают графику на CANVAS с помощью JS.
Изначально CANVAS был создан для возможности создания двумерной графики. На данный момент уже существуют библиотеки, с помощью которых можно создавать трёхмерные изображения. Существует очень много различных JS-библиотек, которые помогают работать с CANVAS. Вот некоторые из них:
- LibCanvas — библиотека для создания двумерных интерактивных приложений и игр
- CreaetJS — несколько библиотек, позволяющих работать с двумерной графикой, анимацией, аудио и загрузкой объектов
- PhiloGL — фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования
Что же с ним делать?
С помощью CANVAS можно делать множество интересных вещей. Например, загляните на Хабрахабр, там полно обзоров на самые разные разработки. Недавно мы разрабатывали конструктор-калькулятор памятников с помощью библиотеки Fabric.js. Оценить его можно, например, по этой ссылке.
CANVAS часто сравнивают с SVG, так как с помощью SVG тоже можно делать различные интерактивные элементы, анимации и т.д. Но CANVAS может манипулировать SVG-элементами, в то время как SVG содержит в себе только отдельные векторные элементы. В CANVAS можно манипулировать любым пикселем, тогда как SVG управляет только path-ами. Также в CANVAS можно задавать для изображений фильтры.