HTML :: Тег <canvas>

В HTML тег <canvas> (от англ. canvas – холст) создает на странице область, в которой при помощи скриптов, в основном JavaScript, можно создавать анимацию, выводить изображения, а также рисовать их, трансформировать и менять свойства.

Внутри элемента <canvas> разрешается располагать альтернативное содержимое, например, изображение или предупреждение о том, что браузер не поддерживает этот тег. Данное содержимое не будет отображаться, если тег поддерживается браузером.

При использовании CSS для изменения размеров холста, следует иметь в виду, что масштабироваться будет и все содержимое элемента <canvas>, что может негативно сказаться на его отображении (например, может появиться заметная пикселизация изображения размером 150х300 пикселей при увеличении размера холста со 150х300 до 300х600 пикселей).

Синтаксис

	<canvas id="Идентификатор">
		... 
	</canvas>         
	
	Закрывающий тег: обязателен.

Атрибуты

height – задает высоту холста (по умолчанию 150px).
width – задает высоту холста (по умолчанию 300px).
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/canvas

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>

<!-- Текст отобразится, если элемент не поддерживается -->
<canvas id="my_canvas" width="300" height="200">
  Извините, ваш браузер нет поддерживает 
  элемент &lt;canvas&gt;.
</canvas>	

<!-- Скрипт закрашивает область холста зеленым цветом --> 
<script type="text/javascript">
  var my_canvas=document.getElementById('my_canvas');
  var ctx=my_canvas.getContext(«2d»);
  ctx.fillStyle='#009900';
  ctx.fillRect(0,0,my_canvas.width,my_canvas.height);
</script> 	
	
</body>
</html>

Пример №1