Що таке Canvas API?

JavaScriptMiddle~2 хв читання

Визначення

Canvas API - це JavaScript-інтерфейс для малювання 2D (і частково 3D) графіки в елементі <canvas> на вебсторінці.

Простіше кажучи: Canvas = "полотно", на якому ти можеш малювати точки, лінії, фігури, текст, зображення й анімації.

1. Основна ідея

javascript

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

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // отримуємо 2D-контекст (інструменти для малювання)

// Приклад: намалюємо прямокутник
ctx.fillStyle = 'skyblue';
ctx.fillRect(50, 50, 200, 100);

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

2. Система координат

Початок координат (0, 0) - у лівому верхньому куті canvas.
x збільшується вправо,
y збільшується вниз.

javascript

(0,0) ─────────► x
 │
 ▼
 y

3. Основні методи 2D Canvas API

Метод	Що робить
`fillRect(x, y, w, h)`	Малює закрашений прямокутник
`strokeRect(x, y, w, h)`	Прямокутник з рамкою
`clearRect(x, y, w, h)`	Стирає ділянку полотна
`beginPath()`	Почати новий шлях (для фігур, ліній)
`moveTo(x, y)`	Перемістити "пензель" без малювання
`lineTo(x, y)`	Намалювати лінію до точки
`arc(x, y, r, start, end)`	Намалювати дугу або коло
`fill()` / `stroke()`	Закрасити або обвести фігуру
`fillText(text, x, y)`	Намалювати текст
`drawImage(img, x, y)`	Намалювати зображення
`translate(x, y)` / `rotate(a)` / `scale(x, y)`	Трансформації (зсув, обертання, масштаб)

4. Приклади

Коло:

javascript

ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'orange';
ctx.fill();

Лінія:

javascript

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 150);
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.stroke();

Текст:

javascript

ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Привіт, Canvas!', 50, 250);

5. Анімації

Canvas ідеально підходить для ігор та анімацій, зазвичай за допомогою requestAnimationFrame().

javascript

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

Квадрат плавно рухається по екрану - без лагів.

6. Canvas vs SVG

Критерій	Canvas	SVG
Підхід	Растровий (пікселі)	Векторний (DOM-об'єкти)
Масштабування	Втрачає якість	Не втрачає
Зміна елементів	Складно (перемальовувати вручну)	Легко (через DOM/JS)
Продуктивність	Відмінна для анімацій, ігор	Відмінна для схем і графіків
Застосування	Ігри, візуалізації, рендери	Іконки, графіки, інтерфейси

Ідея проста:

SVG = структура (DOM)
Canvas = малювання (пікселі)

7. Розширення

Canvas API буває:

2d - для звичайних 2D-малюнків (основний варіант);
webgl - для 3D-графіки за допомогою GPU;
webgl2 - нова версія з розширеними можливостями.

javascript

const gl = canvas.getContext('webgl'); // WebGL API (3D)

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

У реальних проєктах Canvas застосовується для:

графіків і візуалізацій даних (Chart.js, D3.js),
2D-ігор (Phaser.js),
малювання (Paint, графічні редактори),
відеопостобробки (Face filters, AR),
анімацій і ефектів (частинки, хвилі, фони).

Підсумок

Що робить	Canvas API
Де живе	У `<canvas>`
Як працює	Через пікселі, а не DOM
Що можна малювати	Фігури, текст, зображення, анімації
Продуктивність	Дуже висока
Основне застосування	Ігри, візуалізації, ефекти
Головний об'єкт	`CanvasRenderingContext2D`

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

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

Premium

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