Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке Canvas API?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> **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` |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати555 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.