下記コードについて質問させてください。

for (let angle = 0; angle < 360; angle += 6) {
  ctx.save();

  ctx.translate(width / 2, height / 2);
  ctx.rotate(Math.PI / 180 * angle);

  ctx.beginPath();
  ctx.moveTo(0, -this.r);
  ctx.lineTo(0, -this.r + 5);
  ctx.stroke();

  ctx.restore();
}

「繰り返し処理が少なくなれば」と軽い気持ちでsave()部分をforの外に出してみたのですが、うまく動きません…。

//修正1　→　0°、6°、180°地点のみに描画される
ctx.save();

for (let angle = 0; angle < 360; angle += 6) {
//以下略

また、下記のような順番にしてforの外に出してもうまく動きませんでした。

//修正2　→　始点のみがsaveされた動作。rotateがsave、restoreされない
ctx.translate(width / 2, height / 2);
ctx.save();

for (let angle = 0; angle < 360; angle += 6) {
//以下略

クラス分けの都合上、save()以下がforの中にあったほうがいいのは理解しています。
save()とrestore()の動作だけに注目した場合、なにが原因でうまく動かないのでしょうか？