レッスンでは座標空間をを描画ごとにリセットして繰り返す方法でやっています。それをしないでできるか試してみました。結果としては半分成功したのですが理解できない挙動もあるため教えて下さい。

'use strict';

(() => {
  class Icon {
    constructor(canvas) {
      this.ctx = canvas.getContext('2d');
      this.width = canvas.width;
      this.height = canvas.height;
      this.r = 60;

      this.angle = 12;   // update()は使わないで固定とする
      this.firstTime = true;
    }

    draw() {
      this.ctx.fillStyle = 'rgba(255, 255, 255, 1)';　// 半透明ではなく不透明な白
      this.ctx.fillRect(0, 0, this.width, this.height);
      if (this.firstTime) {
        this.ctx.translate(this.width / 2,this.height /2);　　// 初回だけ中心への移動
      }
      this.firstTime = false;
      this.ctx.rotate(Math.PI / 180 * this.angle);

      this.ctx.beginPath();
      this.ctx.moveTo(0, -this.r - 5);
      this.ctx.lineTo(0, -this.r + 5);
      this.ctx.strokeStyle = 'orange';
      this.ctx.lineWidth = 6;
      this.ctx.stroke();
    }

    run() {
      this.draw();
      setTimeout(() => {
        this.run();
      }, 100);
    }
  }

  const canvas = document.querySelector('canvas');
  if (typeof canvas.getContext === 'undefined') {
    return;
  }

  const icon = new Icon(canvas);
  icon.run();
})();

これで描画一回ごとに真っ白になりオレンジの線が時計みたいに移動するようになると思ったのですが実際にはスクリーンショットのように半円になってから消えるようになります。いろいろ考えてみたのですがわかりません。教えて下さい。よろしく願いします。