Основы концепции

< canvas > создает поверхность для рисования, дающую контекст отрисовки, которая используется для создания отображаемого контента и манипуляций с ним. Иными словами, данный тег создает прямоугольную область, на которой можно "рисовать" при помощи JavaScript.

Единственным поддерживаемым на данный момент является двумерный контекст отрисовки, В будущем скорее всего будет добавлен 3D контекст.

Размещается на HTML – странице < canvas > следующим образом:

Включенным в страницу элементом canvas можно как угодно манипулировать, используя JavaScript. В него можно добавлять графику, линии и текст, вы можете сами рисовать на нем и даже добавлять в него полноценную анимацию.

Чтобы программным путем использовать холст, прежде всего необходимо получить его контекст (context). После этого можно выполнить необходимые действия по отношению к контексту, а затем окончательно применить к нему их результат. Т.е. непосредственно отрисовка происходит после того, как все действия по отношению к холсту определены.

С учетом того, что < canvas > поддерживается не всеми браузерами, или их версиями, разработчикам рекомендуют использовать его только в тех задачах, где холст не может быть заменен другими элементами.

На момент написания лекции была заявлена базовая поддержка < canvas > следующими браузерами:

• Internet Explorer 9
• Firefox (версии 9 - 12)
• Chrome (версии 17 - 18)
• Safari (версии 5.0 – 5.1)
• Opera (11.6)
• iOS Safari 5.0
• Opera Mobile 12.0
• Android Browser (версии 3.0 – 4.0)

В случае, если к веб - странице, содержащей холст, обратились посредством браузера, не поддерживающего данный элемент, пользователь увидит содержимое, размещенное в рамках парного тега < canvas >. Такое содержимое называется альтернативным, или аварийным. К примеру:

Разумеется, может в качестве аварийного содержимого может быть использован не только текст.