HTML Тег <canvas>

Пример

Нарисуйте красный прямоугольник динамически и отобразите его внутри элемента <canvas>:

<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</canvas>

<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Попробуйте сами »

Другие примеры "Попробуйте сами" ниже.

Определение и использование

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

Тег <canvas> прозрачен и является только контейнером для графики; для фактического рисования графики необходимо использовать скрипт.

Любой текст внутри элемента <canvas> будет отображаться в браузерах, в которых отключен JavaScript, и в браузерах, которые не поддерживают <canvas>.

Советы и примечания

Совет: Узнайте больше об элементе <canvas> в нашем Учебнике по HTML Canvas.

Совет: Для полного перечня всех свойств и методов посетите нашу Справку по HTML Canvas.

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

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<canvas>	4.0	9.0	2.0	3.1	9.0

Атрибуты

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

Глобальные атрибуты

Тег <canvas> также поддерживает Глобальные атрибуты в HTML.

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

Тег <canvas> также поддерживает Атрибуты событий в HTML.

Другие примеры

Пример

Другой пример с <canvas>:

<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</canvas>

<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Включить прозрачность
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Попробуйте сами »