Canvas API основы

Canvas API предоставляет элемент <canvas> и JavaScript-интерфейс для программного рисования 2D-графики прямо в браузере.

Зачем нужно

Canvas позволяет отрисовывать графику, анимации и интерактивные визуализации без плагинов. Это незаменимый инструмент для игр, графиков, редакторов изображений и любых динамических визуальных интерфейсов. Вся отрисовка происходит через JavaScript-команды в пикселях — в отличие от SVG, который работает с векторными объектами.

Где используется

  • Браузерные 2D-игры (платформеры, головоломки)
  • Динамические графики и диаграммы (Chart.js использует canvas)
  • Онлайн-редакторы изображений (фильтры, кисти, обрезка)
  • Анимации и визуализации данных
  • Генерация превью и миниатюр на стороне клиента

Основной контент

Подключение элемента

<canvas id="myCanvas" width="600" height="400">
  Ваш браузер не поддерживает canvas.
</canvas>

Атрибуты width и height задают физический размер холста в пикселях. CSS-размеры — отдельно; если они отличаются, изображение растянется.

Получение контекста

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

getContext('2d') возвращает объект CanvasRenderingContext2D — через него происходит вся отрисовка.

Базовые операции

// Прямоугольник
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 200, 100); // x, y, width, height

// Контур прямоугольника
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 3;
ctx.strokeRect(300, 50, 150, 100);

// Очистка области
ctx.clearRect(0, 0, canvas.width, canvas.height);

Пути (paths)

ctx.beginPath;
ctx.moveTo(100, 200);
ctx.lineTo(300, 200);
ctx.lineTo(200, 50);
ctx.closePath;
ctx.fillStyle = '#2ecc71';
ctx.fill;
ctx.strokeStyle = '#27ae60';
ctx.stroke;

Окружность и дуги

ctx.beginPath;
ctx.arc(200, 200, 80, 0, Math.PI * 2); // cx, cy, radius, startAngle, endAngle
ctx.fillStyle = '#f39c12';
ctx.fill;

Текст

ctx.font = 'bold 24px sans-serif';
ctx.fillStyle = '#2c3e50';
ctx.textAlign = 'center';
ctx.fillText('Hello Canvas', canvas.width / 2, 50);

Изображения

const img = new Image();
img.onload = () => {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = '/images/photo.jpg';

Простая анимация

let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#e74c3c';
  ctx.fillRect(x, 100, 50, 50);
  x = (x + 2) % canvas.width;
  requestAnimationFrame(animate);
}

animate;

Частые ошибки

  • Путают CSS-размер и атрибуты width/height — если задать размер через CSS без атрибутов, холст 300×150 пикселей растянется, графика размоется. Всегда задавайте размер через атрибуты элемента.
  • Забывают beginPath — без него новый путь добавляется к старому, отрисовка накапливается и даёт неожиданный результат.
  • Рисуют до загрузки изображения — drawImage нужно вызывать внутри img.onload, иначе изображение не появится.
  • Не очищают canvas в цикле анимации — без clearRect каждый кадр рисуется поверх предыдущего.

Связанные темы

Ресурсы