Справочник HTML & CSS

<canvas>

Холст, на котором рисуют из JavaScript: графики, игры, эффекты.

Синтаксис

<canvas id="board" width="300" height="150"></canvas>

Атрибуты

Параметр	Тип	Описание
width, height	number	Размер холста в пикселях.

Примеры

Рисование прямоугольника и текста:

<canvas id="board" width="240" height="100" style="border: 1px solid #ccc;"></canvas>
 
<script>
  const ctx = document.getElementById("board").getContext("2d");
  ctx.fillStyle = "teal";
  ctx.fillRect(20, 20, 80, 60);
  ctx.fillStyle = "black";
  ctx.font = "20px sans-serif";
  ctx.fillText("Hello", 120, 58);
</script>

Примечания

Без JavaScript холст пуст. Размер задавайте атрибутами width и height: если растянуть холст только через CSS, рисунок станет размытым. Нарисованное — просто пиксели, программы чтения с экрана их не видят, поэтому добавляйте текстовое описание.

См. также

<svg> — Векторная графика прямо в HTML: фигуры, иконки, схемы.
<script> — Подключает или встраивает JavaScript; `<noscript>` показывает запасное содержимое, если скрипты выключены.

В учебнике

SVG-графика — Векторная графика SVG прямо в HTML — фигуры, viewBox и масштабирование, линии и контуры, path, заливка и currentColor.

Спасибо, что читаете!