Как реализовать масштабирование холста по центру мыши ⇐ CSS

[Anonymous]

Благодаря вопросу о масштабировании/масштабировании в положении мыши я реализую свой холст масштабирования/масштабирования. Однако при увеличении и уменьшении масштаба использовался следующий код:

Код: Выделить всё

offset.x = e.offsetX - (e.offsetX - offset.x) * step;
offset.y = e.offsetY - (e.offsetY - offset.y) * step;

Я думаю, этот код предназначен для предотвращения перемещения содержимого под курсором мыши за пределы области мыши во время масштабирования, но я не понимаю, почему это реализовано таким образом.
Другими словами, если бы мне пришлось писать это самому, думаю, я бы здесь застрял. Я хочу это понять и освоить, но это кажется очень сложным.

Код: Выделить всё

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const step = 1.02;
const maxScale = 8;
const minScale = 0.3;

let isdragging = false,
scale = 1,
offset = {
x: 0,
y: 0
};

const drawCanvas = () => {
ctx.setTransform([1, 0, 0, 1, 0, 0]);
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.setTransform(scale, 0, 0, scale, offset.x, offset.y);
ctx.fillStyle = "#000";
ctx.fillRect(0, 10, 20, 30);
ctx.fillRect(100, 100, 20, 30);
};

requestAnimationFrame(drawCanvas);

canvas.addEventListener("mousedown", function(e) {
isdragging = true;
});

canvas.addEventListener("mouseup", function() {
isdragging = false;
});

canvas.addEventListener("mousemove", function(e) {
if (isdragging) {
offset.x += e.movementX;
offset.y += e.movementY;
requestAnimationFrame(drawCanvas);
}
});

canvas.addEventListener("wheel", function(e) {
e.preventDefault();
if (e.deltaY = maxScale) {
return
}
scale *= step;
offset.x = e.offsetX - (e.offsetX - offset.x) * step; // why?
offset.y = e.offsetY - (e.offsetY - offset.y) * step; // why?
} else {
if ((scale / step) 

Подробнее здесь: [url]https://stackoverflow.com/questions/78753604/how-to-implement-zooming-a-canvas-centered-on-the-mouse[/url]