HTML тег <canvas>

Элемент <canvas> (от англ. "canvas" ‒ «холст, полотно») определяет область, в которой можно рисовать при помощи скриптов (например, JavaScript). Так в скриптах можно создать графики (рисунки, анимацию, игры) с выводом их в указанный контейнер <canvas>.

Синтаксис

<canvas id="идентификатор">
</canvas>

Закрывающий тег

Обязателен.

Атрибуты

height

Задаёт высоту холста. По умолчанию 300 пикселей.

width

Задаёт ширину холста. По умолчанию 150 пикселей.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <canvas> со следующими значениями CSS по умолчанию:

canvas { 
    height: 150px;
    width: 300px;
}

Различия между HTML 4.01 и HTML5

Тег <canvas> является новым в HTML5.

Пример использования:

Элемент <canvas>

<canvas id = "canvas" width = "225" height = "150" style = "border:1px solid red;">  
    Этот элемент не поддерживается.  
  </canvas>
  <script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(75,75,40,0,Math.PI*2,true); /* Внешняя окружность */
  ctx.moveTo(110,75);
  ctx.arc(75,75,35,0,Math.PI,false);  /* Рот */
  ctx.moveTo(65,65);
  ctx.arc(60,65,5,10,Math.PI,true);  /* Левый глаз */
  ctx.moveTo(95,65);
  ctx.arc(90,65,5,10,Math.PI,true);  /* Правый глаз */
  ctx.stroke();
  </script>

Спецификации