I am having what I thought was a simple problem, but after about a week of searching for the solution I can't seem to find the reason behind it.

Basically I am calling the function below every time the mouse is clicked, and it works fine in Chrome, but in Firefox the alert("This is not called") never gets called.

I know the problem is in the two lines of code:

x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;

but can't seem to find whats wrong. Mozillas site says that event.pageX is a legitimate mand to call, and as well the canvas.offsetLeft.

But the function still isn't getting called. I have tried defining the variables in the function rather than globally, and that doesn't work, and have tried a few other alternatives out, including a jQuery event handler, but I want to try to stay away from jQuery if at all possible, mostly because I want to understand what's going on here, not just find something to patch over it.

Any help would be much appreciated.

also, the site in question is .

EDIT: If it helps at all, the rest of the Javascript in Firefox is running very slowly, which leads me to believe it could be a problem somewhere else in the code, for example when the side navigation is opening, each time the function for the animation is called, it takes much longer then it should.

function q(event){  
    if(hasBeenCalled==0){       
        event = event || window.event;
        var canvas = document.getElementById('canvas');

        x = event.pageX - canvas.offsetLeft;
        y = event.pageY - canvas.offsetTop;

        alert("This Is Not Called");

        Changer2();
        stopDraw();
        moveToCenter();

        t = setInterval(rotateDrawRec, 1);
    }else{}
}

I am having what I thought was a simple problem, but after about a week of searching for the solution I can't seem to find the reason behind it.

Basically I am calling the function below every time the mouse is clicked, and it works fine in Chrome, but in Firefox the alert("This is not called") never gets called.

I know the problem is in the two lines of code:

x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;

but can't seem to find whats wrong. Mozillas site says that event.pageX is a legitimate mand to call, and as well the canvas.offsetLeft.

But the function still isn't getting called. I have tried defining the variables in the function rather than globally, and that doesn't work, and have tried a few other alternatives out, including a jQuery event handler, but I want to try to stay away from jQuery if at all possible, mostly because I want to understand what's going on here, not just find something to patch over it.

Any help would be much appreciated.

also, the site in question is http://cabbibo..

EDIT: If it helps at all, the rest of the Javascript in Firefox is running very slowly, which leads me to believe it could be a problem somewhere else in the code, for example when the side navigation is opening, each time the function for the animation is called, it takes much longer then it should.

function q(event){  
    if(hasBeenCalled==0){       
        event = event || window.event;
        var canvas = document.getElementById('canvas');

        x = event.pageX - canvas.offsetLeft;
        y = event.pageY - canvas.offsetTop;

        alert("This Is Not Called");

        Changer2();
        stopDraw();
        moveToCenter();

        t = setInterval(rotateDrawRec, 1);
    }else{}
}

• javascript
• firefox
• event-handling
• html5-canvas
• dom-events

• You have a typo event = event || window.event... ; missing – micadelli Commented Jun 10, 2012 at 19:40
• Sorry, that was a typo when I was posting it, the actual code has it there, Ill fix it in the question though. Thanks! – Cabbibo Commented Jun 10, 2012 at 19:43
• 4 @micadelli - ; is not required in JavaScript. – Derek 朕會功夫 Commented Jun 10, 2012 at 19:43

2 Answers 2

Instead of doing this:

<canvas id="canvas" onclick="q()"  width="1000" height="900"></canvas>

function q(event){  
    if(hasBeenCalled==0){       
        event = event || window.event;
        var canvas = document.getElementById('canvas');

        x = event.pageX - canvas.offsetLeft;
        y = event.pageY - canvas.offsetTop;

        alert("This Is Not Called");

        Changer2();
        stopDraw();
        moveToCenter();

        t = setInterval(rotateDrawRec, 1);
    }else{}
}

Try this:

<canvas id="canvas" width="1000" height="900"></canvas>

var canvasElem = document.getElementById('canvas');
canvasElem.addEventListener("click", q, false);

function q(event){  
    if(hasBeenCalled==0){       
        event = event || window.event;

        x = event.pageX - this.offsetLeft;
        y = event.pageY - this.offsetTop;

        alert("This Is Not Called");

        Changer2();
        stopDraw();
        moveToCenter();

        t = setInterval(rotateDrawRec, 1);
    }else{}
}

JSFiddle:
http://jsfiddle/5Xs2S/3/

Your site (http://cabbibo./) throws an "canvas3 is null" error on line 61:

var ctx3 = canvas3.getContext("2d");

This error halts the execution of the entire script, so understandably the alert in q() does not get called either.