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

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

Answer 3

ctx.resetTransform();

See MDN documentation for more info. It has very low browser compatibility.