Шпаргалка по API HTML5 2D Canvas

Краткое руководство по HTML5 2D Canvas: создание контекста, базовые фигуры, контуры, трансформации, отрисовка изображений и стек состояний (save/restore).

Составлено Cheat Sheets · Опубликовано24 октября 2026 г.

Краткий справочник по API 2D-контекста отрисовки HTML5 Canvas (CanvasRenderingContext2D).

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

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

Базовые фигуры и заливка

// Стили цвета и линий
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = '#0000ff';
ctx.lineWidth = 4;
ctx.lineCap = 'round'; // 'butt' | 'round' | 'square'

// Прямоугольники: x, y, ширина, высота
ctx.fillRect(10, 20, 200, 100);
ctx.strokeRect(10, 20, 200, 100);
ctx.clearRect(0, 0, canvas.width, canvas.height);

Контуры (Paths) и произвольные фигуры

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 150);
ctx.closePath();

ctx.fill();
ctx.stroke();

Дуги и окружности

// arc(x, y, radius, startAngle, endAngle, counterClockwise)
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.stroke();

Стек состояний (Save & Restore)

ctx.save();    // Сохраняет текущее состояние в стек
// Изменение fillStyle, трансформаций, теней...
ctx.restore(); // Восстанавливает предыдущее состояние из стека

Сохраняемое состояние включает: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation и текущую матрицу трансформации.

Трансформации координат

ctx.translate(dx, dy);
ctx.rotate(angleInRadians);
ctx.scale(scaleX, scaleY);

// Вращение вокруг произвольного центра (ox, oy)
ctx.translate(ox, oy);
ctx.rotate(angle);
ctx.translate(-ox, -oy);

Отрисовка изображений

const img = new Image();
img.onload = () => {
  // Отрисовка полного изображения в точке (x, y)
  ctx.drawImage(img, 0, 0);

  // Масштабированное изображение: (img, dx, dy, dWidth, dHeight)
  ctx.drawImage(img, 0, 0, 150, 100);

  // Обрезка и отрисовка: (img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
  ctx.drawImage(img, 50, 50, 100, 100, 0, 0, 100, 100);
};
img.src = 'picture.jpg';

Шаблон анимационного цикла

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Отрисовка элементов кадра...
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);