HTML тег <canvas>

Значение и применение

Тег <canvas> html5 предназначен для создания растрового двухмерного изображения при помощи скриптов (обычно с использованием языка JavaScript). По умолчанию, у элемента отсутствуют границы и содержание.

Текст, размещенный внутри элемента <canvas> html5 будет отображен только теми браузерами, которые не имеют поддержки данного элемента.

Обращаю Ваше внимание, что необходимо обязательно указывать закрывающий элемент </canvas>.

Поддержка браузерами

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<canvas>	4.0	2.0	9.0	3.1	9.0	12.0

Атрибуты

Атрибут	Значение	Описание
height	pixels	Определяет высоту элемента в единицах измерения CSS - пиксели. Значение по умолчанию 150 пикселей.
width	pixels	Определяет ширину элемента в единицах измерения CSS - пиксели. Значение по умолчанию 300 пикселей.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования элемента <canvas></title>
</head>
<body>
	<canvas id = "Canvas1"width = "225" height = "150" style = "border:1px solid red;">
	<!--текст будет отображен только в том случае, если браузер пользователя не имеет поддержки элемента <canvas> -->
		Этот элемент не поддерживается.
	</canvas>
	<script>
	var canvas = document.getElementById("Canvas1");
	var ctx = canvas.getContext("2d");
	ctx.font = "30px Courier";
	ctx.strokeText("Hello World",0,25);
	ctx.strokeText("Hello World",5,50);
	ctx.strokeText("Hello World",10,75);
	ctx.strokeText("Hello World",15,100);
	ctx.strokeText("Hello World",20,125);
	</script>
	<canvas id = "Canvas2" width = "225" height = "150"	style = "border:1px solid red;">
	<!--текст будет отображен только в том случае, если браузер пользователя не имеет поддержки элемента <canvas> -->
		Этот элемент не поддерживается.  
	</canvas>
	<script>
	var canvas = document.getElementById("canvas2");
	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>
</body>
</html>

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги