Тег <canvas>

Тег <canvas> (укр. — “полотно”) в HTML використовується для створення області, на якій за допомогою JavaScript можна динамічно малювати графіку: 2D-малюнки, графіки, анімації, ігри, візуалізації даних, а також 3D-сцени (через WebGL).

Сам по собі <canvas> — це лише контейнер, який не відображає жодної графіки без скриптів. Вся логіка малювання реалізується через API JavaScript.

Атрибути

Специфічні атрибути

  • width — задає ширину полотна у пікселях. За замовчуванням — 300. Наприклад:
<canvas width="500"></canvas>
  • height — задає висоту полотна у пікселях. За замовчуванням — 150. Наприклад:
<canvas height="400"></canvas>

Глобальні атрибути

Тег <canvas> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор для доступу через JavaScript. Наприклад:
<canvas id="myCanvas" width="400" height="300"></canvas>
  • class — для CSS-стилізації контейнера. Наприклад:
<canvas class="chart" width="400" height="300"></canvas>
  • style —для інлайн-стилів (розмір, рамка тощо). Наприклад:
<canvas style="border:1px solid #000;" width="400" height="300"></canvas>
  • title — для підказок при наведенні. Наприклад:
<canvas title="Графік доходів" width="400" height="300"></canvas>
  • lang — вказує мову (зазвичай не використовується для canvas). Наприклад:
<canvas lang="uk" width="400" height="300"></canvas>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання canvas</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h2>Малювання на canvas:</h2>
    <canvas id="myCanvas" width="400" height="300"></canvas>

    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        ctx.fillStyle = "#FF0000";
        ctx.fillRect(50, 50, 200, 100);

        ctx.strokeStyle = "#0000FF";
        ctx.strokeRect(50, 50, 200, 100);

        ctx.font = "20px Arial";
        ctx.fillStyle = "#000000";
        ctx.fillText("Простий приклад", 60, 180);
    </script>
</body>
</html>

Додаткові моменти

  • Для роботи з <canvas> обов’язково потрібен JavaScript.
  • Використовується два основних API:
    • 2D context — getContext("2d")
    • WebGL (3D) — getContext("webgl") або getContext("webgl2")
  • Якщо браузер не підтримує <canvas>, будь-який текст усередині тега буде відображено як fallback.
  • На відміну від SVG, <canvas> не зберігає DOM-структури намальованих об’єктів — все рендериться безпосередньо у пікселі.
  • Ідеально підходить для складних анімацій, ігор, інтерактивних візуалізацій.
  • Розміри для <canvas> краще задавати через атрибути, а не через CSS, щоб уникнути розтягування зображення.
  • Підтримується всіма сучасними браузерами.