Вращение изображения на 90° в HTML5 Canvas: jQuery и canvas

// 'ctx' – это контекст 2D холста, 'img' – изображение, 'angle' – требуемый угол вращения в градусах. Операции проводятся от точки с координатами (x, y).

ctx.save(); // Сохраняем текущее состояние контекста
ctx.translate(x + img.width / 2, y + img.height / 2); // Переходим в центр изображения
ctx.rotate(angle * Math.PI / 180); // Поворачиваем изображение на заданный угол, приведенный к радианам
ctx.drawImage(img, -img.width / 2, -img.height / 2); // Рисуем изображение
ctx.restore(); // Возвращаем настройки контекста в исходное состояние

let angle = 0; // Устанавливаем начальный угол
const img = new Image();
img.onload = function() { drawRotated(angle); }; // Отображаем изображение после его загрузки
img.src = 'image.jpg'; // Устанавливаем путь к изображению

// Вращение влево при клике
document.getElementById('rotateLeft').addEventListener('click', function() {
    angle -= 45; // Уменьшаем угол на 45 градусов
    drawRotated(angle);  // Перерисовываем изображение
});

// Вращение вправо при клике
document.getElementById('rotateRight').addEventListener('click', function() {
    angle += 45; // Увеличиваем угол на 45 градусов
    drawRotated(angle);  // Перерисовываем изображение
});

// Функция для реализации вращения изображения
function drawRotated(degrees) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // Очищаем холст
    ctx.save();  // Сохраняем текущее состояние холста
    ctx.translate(canvas.width / 2, canvas.height / 2);  // Перемещаемся в центр холста
    ctx.rotate(degrees * Math.PI / 180);  // Поворачиваем на заданный угол в радианах
    ctx.drawImage(img, -img.width / 2, -img.height / 2);  // Воспроизводим изображение
    ctx.restore();  // Возвращаем настройки контекста в исходное состояние
}

function animateRotation() {
    angle += 1; // Плавное увеличение угла
    drawRotated(angle); // Перекрашивание изображения
    requestAnimationFrame(animateRotation); // Циклическая анимация
}
animateRotation(); // Запуск анимации

if (angle % 180 !== 0) {
    canvas.width = img.height;
    canvas.height = img.width;
} else {
    canvas.width = img.width;
    canvas.height = img.height;
}
drawRotated(angle);

ctx.save();
ctx.setTransform(cos, sin, -sin, cos, x, y); // Применяем сложную трансформацию
ctx.drawImage(img, -img.width / 2, -img.height / 2); // Отображаем изображение
ctx.restore();

Холст (🕒): Готов к действию!
Изображение (🕐): Принимает начальную позицию в 1:00

context.rotate((Math.PI / 2)); // Вращаем на 90 градусов

До вращения: 🕒🕐
После вращения:  🕒🕑

img.onload = function() {
    drawRotated(angle);
};

canvas.width = img.width;
canvas.height = img.height;

angle = angle % 360;

function drawRotated(angle) { ... }  // Начинаем танец!