class property becomes undefined after adding an eventlistener inside the constructor

Question

I am trying to create a class for drawing using typescript, but the property canvas becomes undefined if I add an event listener inside the constructor. here is my code:

export class Canvas {
    private canvas: HTMLCanvasElement;
    constructor() {
        this.canvas = document.getElementById("main_canvas") as HTMLCanvasElement;
        this.canvas.addEventListener("mousedown", this.method1)
    }
    method1() {
        let context = this.canvas.getContext("2d") as CanvasRenderingContext2D;
        context.moveTo(0, 0);
    }
}

here is the error:

Canvas.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'getContext')
    at HTMLCanvasElement.method1

Answer 1

You need to bind the callback. Either do:

this.canvas.addEventListener("mousedown", this.method1.bind(this))

or

this.canvas.addEventListener("mousedown", () => this.method1())

In your inital code, you set the callback to a function pointer (this.method1), which will be executed with this refering to its current value in the executing context. In a click handler, that should be the clicked element, so this is not your object, but the HTML canvas element. And since the canvas has no property canvas, you get the error.

By binding the function with bind(), you get a new function, where this refers to whatever you put into bind.

In an arrow function, this always refers to what this is where the arrow function is declared.