Nov 20, 2022

# Solution 1 :

## Absolute scale

You can set an absolute scale by replacing the current transform with `ctx.setTransform`

All the other transformation functions `ctx.scale`, `ctx.translate`, `ctx.rotate`, `ctx.transform` apply the transform to the existing transform. That is why your scale doubles each time (2,4,8,16)

Thus to set an absolute scale

``````scale = 1;
ctx.setTransform(scale, 0, 0, scale, 0, 0);
``````

To scale by 3

``````scale += 2;
ctx.setTransform(scale, 0, 0, scale, 0, 0);
``````

To scale by 5 add 2 again

``````scale += 2;
ctx.setTransform(scale, 0, 0, scale, 0, 0);
``````

Note this replaces any existing transformations.

To set a complete uniform transform

``````function setTransform(ctx, x, y, scale, rotate) {
ctx.setTransform(
Math.cos(rotate) * scale, Math.sin(rotate) * scale,  // x axis
-Math.sin(rotate) * scale, Math.cos(rotate) * scale,  // y axis is 90deg CW from x axis
x, y  // translation as absolute sets origin in px from top left of canvas
);
}
``````

# Problem :

I would want to rescale the content of the canvas, so in a loop, I use the `rescale` function. However, as I could have expected, it works as in this example: 1 -> 2 -> 4 -> 8 (with a factor = 2). What I would want to have is…: 1 -> 3 -> 5 -> 7 (with a factor = 2). So I should not use `scale`, but what function?

Note that I don’t want, and can’t, use CSS, or other stuff than the canvas’ JS API by default. However if there is no solution, tell me yours even if it relies on CSS…

### Comment posted by JarsOfJam-Scheduler

Sorry. Typo! I use scale. Not rescale. I use scale by giving it 1.0001 as parameters. However, since it rescales the canvas contents, on next iteration, it will take into account the new sizes. And I don’t want that behavior.

### Comment posted by JarsOfJam-Scheduler

I don’t understand why it should work? ^^