Question

To all mathematicians out there please read the whole question, this could be answered without any HTML5 knowledge 🙂

I am zooming (scaling) a HTML5 canvas and i want to do that in a lot of small steps instead of one big step to make the scrooling seem “smooth”. To explain that:

When the user turns the scroolwheel once my goal is to scale the canvas by 20% in total. Now i want to divide this into lets say 20 small steps.

My problem is, that due to the restricted library of the canvas i can only use the scale(xscale,yscale) method of the 2d Context to do so. So i cant set the units to a specific size, that would make it easy. I have to use a factor in every single step and i can’t figure out how this could be done.

So the units of my canvas has been 100 in step 1 i want them to be 130 in step 20 with 19 small steps in between.

1. oldscale: 100, : factor: x, newscale: 101
2. oldscale: 101, : factor: x, newscale: 102
3. oldscale: 102, : factor: x, newscale: 103

……

The variables i now is the current stepnumber (0-19), totalsteps (20) and target-zoom in percent (20)

That is a very simple example of what i need. The main problem is, that i only have access to the X and i cant affect the scales directly.

Can anyone help? I hope i explained it well.

Answer 1

You need the 20-th root of 130/100. To compute it use

k = Math.exp(Math.log(130/100) / 20)

k raised to the 20-th power will be 130/100.