<canvas> - Елемент для малювання

HTML-тег <canvas> використовується для створення графіки, анімацій, ігор та візуалізації даних в реальному часі за допомогою JavaScript.

HTML-елемент <canvas> створює область на вебсторінці, в межах якої можна малювати 2D-фігури та растрові зображення за допомогою JavaScript. Сам по собі тег <canvas> — це просто контейнер; уся робота з малювання виконується через Canvas API або WebGL API.

Цей елемент надає величезні можливості для створення динамічної та інтерактивної графіки: від простих фігур та анімацій до складних 3D-ігор, візуалізації даних та обробки зображень.

<canvas id="myCanvas" width="400" height="200">
  Ваший браузер не підтримує цей елемент.
</canvas>

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

canvas {
  border: 1px solid #ccc;
}

var canvas = document.getElementById("shapesCanvas");
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");

  // Червоний прямокутник
  ctx.fillStyle = "rgb(200, 0, 0)";
  ctx.fillRect(10, 10, 50, 50);

  // Синій прямокутник з прозорістю
  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect(30, 30, 50, 50);
}

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

canvas {
  border: 1px solid #ccc;
}

var canvas2 = document.getElementById("pathCanvas");
if (canvas2.getContext) {
  var ctx2 = canvas2.getContext("2d");

  // Малюємо коло
  ctx2.beginPath();
  ctx2.arc(75, 75, 50, 0, Math.PI * 2, true); // Зовнішнє коло
  ctx2.moveTo(110, 75);
  ctx2.arc(75, 75, 35, 0, Math.PI, false); // Рот
  ctx2.moveTo(65, 65);
  ctx2.arc(60, 65, 5, 0, Math.PI * 2, true); // Ліве око
  ctx2.moveTo(95, 65);
  ctx2.arc(90, 65, 5, 0, Math.PI * 2, true); // Праве око
  ctx2.stroke();
}