Каким образом использовать матрицы преобразования на Canvas?

@onie 

Матрицы преобразования используются для трансформации элементов на Canvas.

Для применения матрицы к элементу Canvas (например, кругу или прямоугольнику) можно использовать метод Context.transform(a, b, c, d, e, f), где a, b, c, d, e, f — это элементы матрицы преобразования.

Например, чтобы повернуть элемент на 45 градусов, можно использовать следующий код:

1
2
3
4

ctx.translate(canvas.width/2, canvas.height/2); // перемещаем начало координат в центр холста
const angleInRadians = Math.PI / 4; // 45 градусов в радианах
ctx.rotate(angleInRadians); // поворачиваем элемент
ctx.fillRect(-50, -50, 100, 100); // рисуем элемент (прямоугольник)

Также можно использовать другие методы Context для применения матрицы преобразования, такие как Context.scale(), Context.translate() и Context.rotate().