javascript - Html Canvas lag when Left Mouse is down and moving on Chrome

Question

I have created a canvas and I have added mouse events to it:

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.width = screenWidth;
canvas.height = screenHeight;

... 

// CALLED AT START:
function setup() {
    // Mouse movement:
    document.onmousemove = function(e) {
        e.preventDefault();
        target.x = e.pageX;
        target.y = e.pageY;
        angle = Math.atan2((target.y - localPlayer.getY()),
            (target.x - localPlayer.getX()));
        // Distance to mouse Check:
        var dist = Math.sqrt((localPlayer.getX() - target.x)
            * (localPlayer.getX() - target.x) + (localPlayer.getY() - target.y)
            * (localPlayer.getY() - target.y));
        var speedMult = dist / (canvas.height / 4);
        socket.emit("update", {
            ...
        });
    }
    document.onmousedown = function(e) {
        e.preventDefault();
    }
}

Now the issue is when I hold down the only left mouse button and move the mouse at the same time, my game lags a lot. Simply moving the mouse causes no lag. I have tested this on chrome and on firefox. It seems that I can only recreate the issue on chrome. Using the middle mouse button or right button has the same behaviour in the game and cause no lag. Only when using the left mouse button causes lag.

I have looked around for answers and found that I should prevent default behaviour like so:

e.preventDefault();

But that did not resolve the issue. I have also tried to update a number on the screen that represents the mouse position. And it updated normally. Only the game itself was lagging. Could it be that the onMouseMoved is never called whilst the left button is held down? But then why is it called with the middle and right button?

The issue should be with the code I a calling inside of the move method, because it works fine when I am not holding down the left key, and it works well on firefox. There must be something else going on.

EDIT: I decided to a recording on chrome to see what is going on. Here is the result:

What's really odd, when I press the middle mouse button or the right button, the game does the same thing, but it does not lag at all. What are you doing chrome?

EDIT: Test it out here: www.vertix.io note that not everyone seems to be able to reproduce this issue.

Thank you for your time.

Answer 1

When you hold down the left mouse button and move it in the same time, you are dragging.

Edit: In some versions of Chrome, there is a bug (when I posted this answer I had it, now I don't), which causing the drag events to be fired even without the element having the draggable attribute. Normally, drag events should only be fierd from elements which have the draggable attribute set to true (except images and anchors who are drragable by default).

According to the MDN, when drag events are being fired, mouse events, such as mousemove, are not, which means that your function isn't being called.

A possible solution are to use the same function for both drag and mousemove events:

function mouseMove(e) {
    //do your things here
    ...
}

document.addEventListener('mousemove', mouseMove);

document.addEventListener('drag', mouseMove);

Note: If you'll use the same function for both events, you should be aware of which properties of the event you're using in the function, because of the difference between the drag and mousemove events. The two events doesn't contains the exact same properties and the behavior of some properties may not be the same in both of them.