クロッククラスで角度とコンテキストの設定してドロワークラスのドローメソッドに渡して描画させる。というのが下記のコードだと思うのですが

drawFace() {
      for (let angle = 0; angle < 360; angle += 6) {
        this.drawer.draw(angle, ctx => {
          ctx.moveTo(0, -this.r);
          if (angle % 30 === 0) {
            ctx.lineWidth = 2;
            ctx.lineTo(0, -this.r + 10);
            ctx.font = '13px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
          } else {
            ctx.lineTo(0, -this.r + 5);
          }
        });
      }
    }

正直わかりにくいと言うか読みくいので無名関数にしているのを切り出してみたら少しは読みやすいのではと思いやってみたらうまくいきません。

ちなみにエラーは　Uncaught TypeError: Cannot read property 'r' of undefined　です。r はクラス内にコンストラクタで定義されているのですが。。。

drawFace() {
      for (let angle = 0; angle < 360; angle += 6) {
        function func(ctx) {
          ctx.moveTo(0, -this.r);
          if (angle % 30 === 0) {
            ctx.lineWidth = 2;
            ctx.lineTo(0, -this.r + 10);
            ctx.font = '13px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
          } else {
            ctx.lineTo(0, -this.r + 5);
          }
        }
        this.drawer.draw(angle, func);
      }
    }

funcの部分をいろいろいじってみてもうまくいきません。

this.drawer.draw(angle, func());
this.drawer.draw(angle, func(ctx));
this.drawer.draw(angle, func(););
this.drawer.draw(angle, () => {func()};);

などなど...。

切り出しができないからあえてこのようになっているのでしょうか？
よろしく願いします。