context saveとrestore

Question

context.save();
context.translate(t.px[0], t.py[0]);
context.rotate(Math.atan2(t.vy, t.vx));
context.beginPath();
context.ellipse(0, 0, 6.5, 4, 0, 0, 2 * Math.PI);
context.fill();
context.restore();

上記はtimerなどで連続で呼び出し楕円を移動させるアニメーションのコードの一部です。
このコードのsave()とrestore()をコメントアウトするとcontext.ellipseで作成された楕円の位置がめちゃくちゃになります。
context.save()を調べると現在の塗りの色・輪郭の色・透明度・線の太さなどの描画スタイルを保存しrestoreで復元するとなっています。
位置的なものをどうこうするなどは書かれていません。なぜ描画位置がめちゃくちゃになるのか原理が解りません。

ちなみにコメントアウトしないと線状にきれいに移動します。
なぜ描画位置がめちゃくちゃになるのでしょうか？

Comments

[m.ts10806]

コードが一部だけだと誰も再現できないので「なぜ」と言われても検証難しいですね。なるべく全体を提示してください。現象がコピペで再現できる最小構成のコードが望ましいです。

Answer 1

毎回save()することでtranslateによる移動をチャラにする。save()しないと基点がx値、y値だけズレていく。translateとrotateの基点がずれることで描画がめちゃくちゃに見えたということでした。