Question

I have a slight problem here I try to solve. As I start to do animation with HTML5 and Canvas I want to have a constant animation flow and also be able to capture mouse movement without interrupting the animation flow. This right now seems like a problem. Ill bring
some code from my test code here.

function mainInit()
{
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    ballArray.push(new Ball(30,30,2,4,15,"#EEEEEE"));
    setInterval(drawScene,20);
} 

function drawScene() 
{ 
    // main drawScene function    
    clear(); // clear canvas         
    // draw animated objects        
    for(var i = 0; i < ballArray.length; i++)
    {
    ballArray[i].draw();
    }       
    Event_MouseMove();
}

var messageMousePos = '';    
function Event_MouseMove()
{
    canvas.addEventListener('mousemove', function(evt)
    {
    var mousePos = getMousePos(canvas, evt);
    messageMousePos = "Mouse position: " + mousePos.x + "," + mousePos.y;   
    context.font = '10pt Calibri';
    context.fillStyle = 'black';
    context.fillText(messageMousePos , 5, 15);
    }, false);        
}

The problem is that when I move the eventListner for mouse movement overrides the draw interval and makes it go much slower. How/where should I put the code for the mouse event so it do not interrupt this draw interval, but still draw the mouse events according to the interval?

Answer 1

At a glance, it looks like the code will try to add an event listener every frame…While JS will dump duplicate handlers, it will slow your code down. It’s unclear whether you are trying to only capture mouse movement every interval, or constantly, because your code is kinda trying to do both. Here’s the best of both worlds solution:

Call addEventListener once outside the loop, and have the function it calls save the mouse position in messageMousePos. Then, within the drawScene function, put your font/fillstyle/filltext code if you really do only want the text outputting every 20ms. This might look choppy compared to how smoothly the text would change if you were constantly rendering the mouse position text.

Here is an example of constantly capturing and displaying the mouse position, as you might actually want to do.