javascript - マウスイベントが定義されていません

Question

Web ページに HTML5 キャンバスがあり、キャンバスに画像を描画する JavaScript 関数があります。画像にマウスイベントを追加しようとしています。これにより、クリックすると別の JavaScript 関数が呼び出され、キャンバスに表示される内容が更新されます。

Firefox でページを表示しているときに、キャンバスに表示されている画像をクリックしても何も起こりません。Firebug を使用して何が問題なのかを確認しようとしていますが、次のメッセージが表示されます。

 mouse_event is not defined
 drawStartButton()index.html (line 107)
 startGame()index.html (line 64)
 (?)()index.html (line 1)
 event = load
 [Break On This Error]  

 ...useX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox....

 index.html (line 107)

キャンバスにスタートボタンを描画するために使用した関数と、追加したマウスイベントは次のとおりです。

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 260.5, 60);
            };
            image.src = "StartButton.png";
            /** Now I need to add an event listener to the area of the canvas on 
                on which the button image is displayed, in order to 'listen' for 
                a click on the button */
            var boundingBox = myGameCanvas.getBoundingClientRect();
            var mouseX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox.width);
            var mouseY = (mouse_event.clientY-boundingBox.top) * (myGameCanvas.height/boundingBox.height);
            var pixels = context.getImageData(mouseX, mouseY, 1, 1); }

基本的に、私がやりたいことは、ユーザーがボタンをクリックすると、以下の関数が呼び出され、キャンバスの内容を更新することだけです:

function drawLevelOneElements(){
            var context = canvas.getContext("2d");

            /* Draw the images for numbers 1-10.*/
            var image1 = new Image();
            /* Test that this code is being executed */
            context.moveTo(300, 300);
            context.font = "11pt Calibri";
            context.strokeStyle = "black";
            context.strokeText("Testing",300, 300);
            /* End of test */

            image1.onLoad = function(){
                context.drawImage(image1, 50, 50);
                };
            image1.src="1.png";
        }