Right click wont fire on ("mousedown") addEventListener vanilla.js

Question

I'm following a tutorial and the stage I'm on were building a graph. using the mouse to add points and segments. I've ran over the code a lot I cant seem to find the bug the console has no errors. For some reason the event listener specifically the if statement will not process. so in return the right click will not get picked up by the event listener. so I can' add points but can't remove them. in my opinion this should be working according to the code in the tutorial since I've gone back 5 times it should work. Would love it if ya'll could take a look and tell me what you think.

 
This should add points with the left click which currently work then remove the points with the right click which does not work.
Line three is the culprit in my opinion but my opinion cant be trusted.

#addEventListeners() {
     this.canvas.addEventListener("click", (event) => {
        if (event.button == 2) { // right click
            console.log("right click")
            if (this.hovered) {
                this.#removePoint(this.hovered);
                
            }
            
        }
            if (event.button == 0) { //left click
            const mouse = new Point(event.offsetX, event.offsetY);
            if (this.hovered) {
                this.selected = this.hovered;
                return;
            }
            this.graph.addPoint(mouse);
            this.selected = mouse;
            }
        });


This is the full file.


class GraphEditor {
    constructor(canvas, graph) {
        this.canvas = canvas;
        this.graph = graph;

        this.ctx = this.canvas.getContext("2d");

        this.selected = null;

        this.hovered = null;

        this.#addEventListeners();

    }

  #addEventListeners() {
     this.canvas.addEventListener("click", (event) => {
        if (event.button == 2) { // right click
            console.log("right click")
            if (this.hovered) {
                this.#removePoint(this.hovered);
                
            }
            
        }
            if (event.button == 0) { //left click
            const mouse = new Point(event.offsetX, event.offsetY);
            if (this.hovered) {
                this.selected = this.hovered;
                return;
            }
            this.graph.addPoint(mouse);
            this.selected = mouse;
            }
        });

        this.canvas.addEventListener("mousemove", (evt) => {
            const mouse = new Point(evt.offsetX, evt.offsetY);
            this.hovered = getNearestPoint(mouse, this.graph.points, 10);
        });
        
        document.addEventListener("contextmenu", (event) => {
            event.preventDefault();
         });

    }

    #removePoint(point) {
        this.graph.removePoint(point);
        this.hovered = null;
        this.selected = null;
    }

    display() {
        this.graph.draw(this.ctx);
        if (this.hovered) {
            this.hovered.draw(this.ctx, { fill: true });
        }
            if (this.selected) {
                this.selected.draw(this.ctx, { outline: true });

        }
    }
}



the tutorial is a world simulator with a nural network using html css and java script really good so far. the map changes with the seasons on time and is really cool. heres the link. https://youtu.be/5iHejdqYIa8?si=b6XaufgLgOSg1gn3