HTML5 translate method, how to reset to default?

Question

Since HTML5's translate-method moves the origin of drawing relatively to its former origin apparently. (when I use ctx.translate(20,20) twice in a row I get the same result as when I use ctx.translate(40,40)) Well now the problem is I'd like to reset the origin of drawing to its original position(the position it had before first useing of translate() on it), how do I do that?

Answer 1

You can do that by using .save() and .restore()

ctx.save(); ctx.translate(// do some translations); // draw whatever ctx.restore(); 

You need to call save() to "save" the current contexts state. Then you can perform translations, rotations, etc. After your finished call restore() to reset the context's state to what it was when you initially called save().

Live Demo

MDN Tutorial also explaining it

Answer 2

ctx.setTransform(1, 0, 0, 1, 0, 0); 

MDN setTransform documentation