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?
You can do that by using
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