缩放后如何重置HTML5 canvas？

Question

I'm trying to create an HTML5-canvas based web app with zooming-to-cursor functionality. The idea is simple:

• a user loads an image via standard HTML input;
• the image gets centered on a canvas;
• the user can zoom in/out the image to a cursor location;
• when the user loads another image, canvas gets cleared and reset;

I'm having troubles with the last step. When I load the first image, zoom in/out and then load the second image, I get the second image already zoomed to the scale of the previous image. I suppose the problem comes from trackTransforms function (took it there ), but I don't understand how it works, so I can't track down the issue.

Live code: https://jsfiddle.net/Arkonage/tgkv21s8/22/

Answer 1

As a quick and dirty solution:

• Add ctx.save(); to the beginning of the trackTransforms() function definition.
• Add ctx.restore(); ctx.save(); ctx.restore(); ctx.save(); to the beginning of the resetCanvas() function definition.