Тег <canvas>

Синтаксис

<canvas>...</canvas>

Описание

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

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

Внимание!

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

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

Атрибуты

Атрибут Значение Описание
height px

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

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

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

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

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <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

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge
<canvas> Да Да Да Да Да