Canvas для работы с графикой

Для рисования на Web-странице с помощью скриптов можно использовать элемент HTML 5 canvas. Этот элемент задается в HTML-документе контейнерным тегом <canvas>, а соответствующий ему объект — методом getContext('2d'). Указанный объект содержит множество методов, с помощью которых можно рисовать линии и фигуры, трансформировать картинки и т.п. Чтобы воспользоваться объектом canvas, необходимо выполнить следующее:

В HTML-коде страницы записать тег <canvas></canvas>с необязательными атрибутами width и height; если эти атрибуты не указаны, то элемент canvas будет иметь размеры 300x150px. По умолчанию canvas имеет прозрачный фон и невидимые границы. С помощью CSS можно задать иные параметры.
В сценарии доступ к объекту canvas осуществляется, например, так:
```
ctx = document.getElementById('id_canvas').getContext('2d');
```

Далее в сценарии применяют методы объекта convas. В сценарии желательно проверить возможность применения объекта canvas следующим образом:

var mycanvas = document.getElementById('canvas'); // 'canvas' — значение id тега <canvas>
if (mycanvas.getContext){
  var ctx = mycanvas.getContext('2d');
  // здесь код для рисования
} else {
  // здесь код для случая когда canvas не поддерживается
}

Canvas для работы с графикой

Примеры:

Полезные ссылки