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

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.

Have you considered throttling?

Check out https://blog.toggl.com/2013/02/increasing-perceived-performance-with-_throttle/

You have the mouse event on the document. As we can not see what you have on the document it is hard to know if that is a cause of your problems.

Try moving the mouse event to the canvas only, as that is the only place you need it I presume. No point handling events for the document if its not part of the game, plus document is last on the list if child elements have events attached. They go first and then it bubbles up to yours.

As it looks like you are using a framework of some type there is in all possibility another mouse event listener that is part of the frame work that may be slowing you down by not preventing default. You will have to search the framework to see if it has a listener for any of the mouse events.

And use addEventListener rather than directly attaching the event via .onmousedown = eventHandler
eg canvas.addEventListener("mousedown",eventHandler);

And add the event listener to the element you need it for, not the document.