html5 canvas obj.addEventListener is not defined

Question

I'm trying to click a canvas and get the mouse position, similar to Getting mouse location in canvas.

var board = new function(){
    this.id = document.getElementById("board");
    this.ctx = this.id.getContext("2d");
}

function newGame(piece) {
    drawGrid();
    board.addEventListener("click", getMousePosition);
    if (piece == "X") {
        players.player = "X";
        players.computer = "O";
    } else {
        players.player = "O";
        players.computer = "X";
    }
}

I've been racking my brain and the internet trying to solve the issue. There's Cannot attach Event listener to canvas? but I'm not using getElementsByTagName. I looked at MouseMove issue on canvas, but my canvas shouldn't be out of scope the way I defined it. event listener on canvas in html5 issue doesn't help because I'm not trying to add a listener to the context. Could someone please tell me what's going on?

https://codepen.io/csinclair/pen/owVqyq

score 0 · Accepted Answer · answered Jul 15 '17 at 01:50

0

The element is board.id, not board.

should be board.id.addEventListener("click", getMousePosition);

answered Jul 15 '17 at 01:50

Phil Dornfeld

105
4

html5 canvas obj.addEventListener is not defined

1 Answers1