How can I reset the scale of a canvas' context?

Question

I have a variable, context, which is the 2d context of my canvas.

var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');

Calling context.scale(x,y) multiple times scales the context depending on what the previous scales did. For example, context.scale(2,2); context.scale(2,2) is equivalent to context.scale(4,4). How can I reset the context's scale?

Answer 1

scale will multiply the current transform matrix by a scale matrix, so indeed, these scale factors multiply. You can use the state stack to save and restore the current transform:

context.save();
context.scale(2, 2);
... // anything drawn here is twice as big
context.restore();

Alternatively, you can reset the transform by loading the identity matrix directly:

context.scale(2, 2);
...
context.setTransform(1, 0, 0, 1, 0, 0);