html5 canvas obj.addEventListenerが定義されていません

Question

キャンバスをクリックしてマウス位置を取得しようとしています（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"; 
    } 
} 

私はこの問題を解決しようとしています。 Cannot attach Event listener to canvas?がありますが、私はgetElementsByTagNameを使用していません。私はMouseMove issue on canvasを見ましたが、私のキャンバスは、私が定義した方法で範囲外にすべきではありません。コンテキストにリスナーを追加しようとしていないため、event listener on canvas in html5 issueは役に立ちません。誰かが何が起こっているか教えてもらえますか？

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

Answer 1

要素がboard.id、ないボードです。

は、 board.id.addEventListener("click", getMousePosition);