Що робить елемент <canvas>?

HTMLJunior~1 хв читання

Елемент <canvas> створює на веб-сторінці область для малювання, де за допомогою JavaScript можна динамічно малювати графіку, анімацію, графіки, ігри, візуалізації і навіть 3D-об'єкти.

Сам по собі <canvas> - це порожній контейнер, як полотно в Photoshop: без коду: просто прямокутник; з JavaScript: живе інтерактивне полотно.

1. Найпростіший приклад

html

<canvas id="myCanvas" width="300" height="200"></canvas>

Що відбувається:

створюється область 300×200 пікселів;
типово: прозора і порожня;
без скрипту нічого не відрендериться.

2. Як з ним працювати

Малювання виконується через JavaScript-API: спочатку отримуємо «контекст» (об'єкт для малювання), потім викликаємо методи.

Приклад: намалювати коло:

html

<canvas id="myCanvas" width="300" height="200"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d'); // 2D-контекст малювання

  ctx.fillStyle = 'skyblue';
  ctx.beginPath();
  ctx.arc(150, 100, 70, 0, Math.PI * 2); // центр x,y, радіус, кути
  ctx.fill();
</script>

Результат: на сторінці з'явиться блакитне коло.

3. Основні режими контексту

Тип контексту	Призначення
`"2d"`	Робота зі звичайною двовимірною графікою (фігури, лінії, текст, зображення)
`"webgl"`	Тривимірна графіка з апаратним прискоренням (через WebGL API)

Приклад:

const ctx = canvas.getContext('webgl');

4. Що можна малювати на `<canvas>`

фігури (лінії, прямокутники, кола);
текст і шрифти;
растрові зображення;
анімації (через requestAnimationFrame);
візуалізації даних, ігри, 3D-сцени.

5. Важливі атрибути

Атрибут	Призначення	Приклад
`width`	ширина полотна в пікселях	`width="500"`
`height`	висота полотна	`height="300"`
(якщо не задані)	типово `300×150`	-

Розміри потрібно задавати атрибутами, а не CSS, інакше картинка може спотворюватися під час масштабування.

6. Приклад: малювання тексту

ctx.font = "24px Arial";
ctx.fillStyle = "darkred";
ctx.fillText("Hello, Canvas!", 50, 100);

7. Приклад: анімація

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 50, 50);
  x += 2;
  requestAnimationFrame(animate);
}
animate();

Квадрат буде плавно рухатися праворуч.

Підсумок:

Властивість	Значення
Тег	`<canvas>`
Призначення	Полотно для динамічного малювання через JavaScript
Контекст	`2d` або `webgl`
Особливість	Сам по собі порожній: усе малює скрипт
Застосування	Ігри, графіки, анімації, візуалізація даних, ефекти

Простими словами: <canvas> - це цифрове полотно, на якому ти можеш малювати все, що завгодно, від простих фігур до складних інтерактивних сцен, якщо у тебе є пензель, тобто JavaScript.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.