В этой статье мы изучим базовые возможности тега <canvas>, чтобы у вас сложилось впечатление, что это вообще такое и как это можно использовать.
Данный тег был добавлен в HTML 5 и имел примерно следующее определение "растровый холст, используемый для отображения на странице диаграмм, игровой графики или отрисовки изображений средствами веб-страницы".
По сути представляет собой прямоугольную область, в которой можно производить различные манипуляции по отрисовке различных элементов и фигур, задается при помощи парного тега <canvas></canvas>, может иметь два дополнительных атрибута - width и height, которые будут задавать размер и, что не мало важно, будут задавать размер самого холста в координатах (использование аналогичных свойств в CSS не даст нужного результата).
Для того, чтобы начать рисовать на таком холсте, необходимо задать ему id и получить доступ к этому элементу по id в JavaScript, именно там и будет происходить вся логика отрисовки. После чего, при помощи различных встроенных функций можно будет рисовать различные фигуры, стирать их и производить другие манипуляции, как будто вы работаете в Paint или других графических редакторах.
Давайте рассмотрим простой пример - создадим пустой холст и нарисуем на нем черный прямоугольник, для восприятия сам элемент <canvas> поставим по центру и добавим ему тень:
Здесь можно ответить функцию Draw, которая вызывается при помощи атрибута onLoad для <body> и рисует прямоугольник, в строке 2 мы получаем элемент <canvas> по id, в следующей строке мы получаем контекст на этот элемент, именно к нему применяются все функции рисования, а далее функцией рисуем прямоугольник из угла (50;25) в угол (150;100), который стандартно закрашивается черным цветом.
Результат можно увидеть на демо странице:
Вот и все, что вам нужно знать, чтобы начать использовать Canvas, в следующих статьях мы постараемся раскрыть другие возможные рисуемые элементы и возможности работы с canvas.
