Erste Maus-Klick-events auf einer Leinwand

Ich habe versucht und versucht, meine einfache javascript-Skript zum verschieben eines springenden ball, wo ein Mausklick-Ereignis passiert ist. Ich habe das Skript hier. Es wird eine Schnittstelle mit jedem Leinwand beliebiger Größe mit der id game. Der ball springt aber ignoriert Mausklicks. Wissen Sie, was ist falsch? Danke.

var canvas;
var x, y;
var dx=4;
var dy=4;
var d = 20;
var width, height;

function init() {
    canvasE = document.getElementById('game');
    canvas= canvasE.getContext('2d');
    width = canvasE.width;
    height = canvasE.height;
    x = d+dx+1;
    y = d+dy+1;
    canvasE.addEventListener("click", onClick, false);

    clear();

    canvas.beginPath();
    canvas.fillStyle="#0000ff";
    //Draws a circle of radius 20 at the coordinates 100,100 on the canvas
    canvas.arc(x-1,y-1,d,0,Math.PI*2,true);
    canvas.closePath();
    canvas.fill();
    setInterval(loop, 15);
}

function loop() {
    clear();

    canvas.beginPath();
    canvas.fillStyle="#0000ff";
    //Draws a circle of radius 20 at the coordinates 100,100 on the canvas
    canvas.arc(x,y,d,0,Math.PI*2,true);
    canvas.closePath();
    canvas.fill();
    //Boundary Logic
    if( x<(d-dx)+1 || x>width-(d+dx)-1) dx=-dx;
    if( y<(d-dx)+1 || y>height-(d+dy)-1) dy=-dy;
    x+=dx;
    y+=dy;
}
function clear() {
    canvas.fillStyle="#ffffff";
    canvas.fillRect(0,0,width,height);
    canvas.fillStyle="#888888";
    canvas.strokeRect(0,0,width,height);
}

function onClick(e) {
    var clickX;
    var clickY;
    if (e.pageX || e.pageY) { 
        clickX = e.pageX;
        clickY = e.pageY;
    }
    else { 
        clickX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
        clickY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    clickX -= gCanvasElement.offsetLeft;
    clickY -= gCanvasElement.offsetTop;
    x = clickX;
    y = clickY;
}

InformationsquelleAutor | 2011-06-21