Question

I am having an issue getting addEventListener to trigger properly with my canvas element.

Issue:
When I add addEventLister onto my canvas element it automatically forces to animation refresh rate to run at the same time the event listener is being triggered.

Basically I have “setInterval(draw, 500);” which updates the canvas every 500 milliseconds. Without the event listener it will constantly refresh at it’s intended rate; however, when I add an action listener it force-refreshes canvas and causes all animations to speed up.

In the source code you will find two functions drawCircle and drawCircleTest which is specifically designed for testing the refresh issue.

hmm, for some reason the source code doesn’t want to paste properly

Source Code: http://home.insightbb.com/~epyonxl1/html5_test.htm

Thanks in advance for taking a look!!!

Answer 1

Because you’re calling draw on the mouseover event as soon as you move the mouse onto the canvas the next time the setInterval draw() is called the mouseover draw() calls have increased the value of testNum1 by more the number of mouseover events called. I’ve appended testNum1 to the end of the “Console” output here http://jsfiddle.net/uM5VC/ so you can see the affect (oddly this doesn’t work properly in chrome. The link below does).

The solution is to use a different function for the mouseover event that sets the clientHeight and clientWidth to variables declared outside the scope of draw. See http://jsfiddle.net/aMdRm/3/

I’ve added these variables before any of the functions

var clientX, clientY;

and this function to set them

function changeCoords(e){
    clientX = e.clientX;
    clientY = e.clientY;
}

the mouseover event now use changeCoords and the draw event references clientX and clientY as opposed to e.clientX and e.clientY.