Объект canvas давно известен. Он реализован во многих системах программирования, это один из первых объектов, с которыми знакомятся новички, делающие робкие попытки самостоятельного написания кода.
Разместить с помощью HTML 5 на веб-странице «холст» для рисования чрезвычайно просто. Для этого надо включить в ее состав дескриптор canvas, указав посредством его атрибутов ширину и высоту элемента.
Затем следует получить доступ к объекту холста, для чего используется любой из известных подходов, например вызов фун-
кции getElementById(). Завершается подготовка к работе извлечением графического контекста посредством функции getContext(), принадлежащей объекту canvas. Теперь можно рисовать на холсте линии, геометрические фигуры, заливать контуры цветом, одним словом, выполнять благодаря JavaScript то, что позволяют делать многие другие языки. Но что же тут особенного? Ведь изображение можно расположить на сервере и включить его в HTML-документ с помощью дескриптора . Разница, однако, весьма существенна. Предположим, вам надо разместить на веб-странице простой рисунок (не фотоснимок!), включающий несколько прямоугольников, соединенных стрелками. Размер файла, в зависимости от размера картинки и формата, будет варьироваться от десятков до сотен килобайт (интересно, что формат PCX, обеспечивающий для подобных изображений максимальную степень сжатия без потери качества, браузерами не поддерживается). Используя элемент canvas, нужное изображение можно без проблем нарисовать в браузере. Для этого достаточно лишь нескольких строк кода. Но это еще не все.
Связав вызов функций рисования с событиями мыши, можно реализовать элементарную «чертежную доску» и рисовать на ней в интерактивном режиме. Просмотрев исходный код страницы, вы оцените, насколько он прост.
