条件によって実行する関数を変更することを、変数に関数名を代入することで成し遂げたい

Question

前提・実現したいこと

canvasでテキスト描画を行う際に、「fillTextかstrokeTextのどちらかの関数を実行するかが決まっているメソッド」を持ったクラスを作り、fillかstrokeかを気にせずにテキスト描画を実行しようと思いました。
そのために、変数にテキスト描画関数を代入し、その変数を操作することで、fillかstrokeかを変更できるようなコードを設計し実行したところ、エラーが発生してしまい困っています。エラー内容から関数として実行しているのは理解できたので、ある程度は予想通りの結果が得られたのですが、なぜ呼び出した関数がcanvasの関数ではないのかが理解できず、解決策がわかりません。

ソースコードはマウスクリックでテキスト描画が行うようになっています。

発生している問題・エラーメッセージ

TypeError: 'fillText' called on an object that does not implement interface CanvasRenderingContext2D.

該当のソースコード

let canvas;
let ctx;
canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;

document.body.appendChild(canvas);
ctx = canvas.getContext('2d');

class Text{
    constructor(ctx){
        this.ctx = ctx;
        this.drawText = this.ctx.fillText;
    }

    draw(mes, x, y){
        this.drawText(mes, x, y);
    }
}

let text = new Text(ctx);
canvas.addEventListener('click', function(){
    text.draw('ナナナ', 50, 50);
})

試したこと

一番簡単な解決策として、メソッド内にif文による条件分岐を設けることによって描画方法を切り替えるやり方がありますが、今回はそれ以外のやり方としてこの方法での解決策を探しています。

Answer 1

JavaScriptの場合、メソッドを変数に代入してから呼ぶと、thisが変化してしまいます。

foo.bar(); // メソッド内でのthisはfoo

const method = foo.bar;

method(); // メソッド内のthisはfooと無関係

thisを変更したくない場合、Function.prototype.bind（MDN）を使ってthisを固定しましょう。

this.drawText = this.ctx.fillText.bind(this.ctx);

Comments

[meron-pan]

ありがとうございます。メソッドを変数に代入した書き方をしたことがなかったので、thisがこの場合でも変化することを知りませんでした。thisが変化した場合は、たいてい「関数　is not function」みたいな文言だったので、thisが問題だったとは知りませんでした。