Тег <canvas>

Синтаксис

Описание

Тег <canvas> (от англ. canvas — холст) создает область на веб-странице, в которой можно создавать разные объекты, рисунки, анимацию, фото композиции при помощи Javascript скриптов.

Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх. Но также может использоваться для встраивания видео в страницу и создания полноценного плеера.

Внимание!

Операции и использование тега <canvas> возможны только через JavaScript.

Атрибуты, которые можно использовать в теге <canvas>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
height	px	Задает высоту элемента в пикселах. Значение по умолчанию: 150
width	px	Задает ширину элемента в пикселах. Значение по умолчанию: 300

Атрибут

Значение

Описание

height

Задает высоту элемента в пикселах.

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

width

Задает ширину элемента в пикселах.

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

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег canvas</title>

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script src="index.js"></script>

</body>

</html>

JavaScript код в файле index.js:

const c = document.getElementById("myCanvas");

const ctx = c.getContext("2d");

ctx.moveTo(0,0);
ctx.lineTo(200,100);

ctx.stroke();

Отображение в браузере:

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<canvas>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

Да