<canvas id="myCanvas" width="500" height="300"></canvas>

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

// Рисуем круг до изменений
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

// Сохраняем текущее состояние
ctx.save();

// Применяем преобразование
ctx.translate(200, 0);
ctx.rotate(Math.PI / 4);

// Рисуем круг после изменений
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

// Восстанавливаем предыдущее состояние
ctx.restore();

// Рисуем круг после восстановления
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();