У меня есть переменная, контекст, который является 2-м контекстом моего холста.
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
Вызов context.scale(x,y) несколько раз масштабирует контекст в зависимости от того, что делали предыдущие шкалы. Например, context.scale(2,2); context.scale(2,2) эквивалентно context.scale(4,4). Как я могу reset масштаб контекста?
scale будет умножать текущую матрицу преобразования на шкалу масштаба, так что действительно, эти масштабные коэффициенты умножаются. Вы можете использовать стек состояний для сохранения и восстановления текущего преобразования:
context.save();
context.scale(2, 2);
... // anything drawn here is twice as big
context.restore();
В качестве альтернативы вы можете reset преобразовать, непосредственно загрузив идентификационную матрицу:
context.scale(2, 2);
...
context.setTransform(1, 0, 0, 1, 0, 0);
Следующий метод более понятен, однако он экспериментален. То есть все, кроме IE и Edge, поддерживают его.
context.resetTransform();
По состоянию на 2019 год разумный вариант по-прежнему:
ctx.setTransform(1, 0, 0, 1, 0, 0);