How to Set Mousemove Update Speed

How to increase speed of mousemove/clientX/Y and applying a transform?

All elements on the page have a transition applied. Remove/override this style and the delay goes away (tested).

Sample Image

Get mouse moving speed

The speed is simply the distance divided by the time it took:

speed = distance / time

The distance is currentmY - mY, while the time is now - timestamp. So in the end, you get:

var timestamp = 0;
var mY = 0;
$(document).mousemove(function(e) {
    var now = Date.now();
    currentmY = e.screenY;

    var dt = now - timestamp;
    var distance = Math.abs(currentmY - mY);
    var speed = Math.round(distance / dt * 1000);
    console.log(dt, distance, speed);
    document.getElementById("speed").innerHTML = speed;

    mY = currentmY;
    timestamp = now;
});

Note the * 1000, since the timestamp is in milliseconds. The speed is here in pixels/second.

See this updated fiddle.

Is there any way to accelerate the mousemove event?

If you want to increase the reporting frequency, I'm afraid you're out of luck. Mice only report their position to the operating system n times per second, and I think n is usually less than 100. (If anyone can confirm this with actual specs, feel free to add them!)

So in order to get a smooth line, you'll have to come up with some sort of interpolation scheme. There's a whole lot of literature on the topic; I recommend monotone cubic interpolation because it's local, simple to implement, and very stable (no overshoot).

Then, once you've computed the spline, you can approximate it with line segments short enough so that it looks smooth, or you can go all-out and write your own Bresenham algorithm to draw it.

If all this is worth it for a simple drawing application... that's for you to decide, of course.

How to handle fast moving mouse which doesn't trigger mousemove event

You do not need the mouseleave on the element. Your problem is that that mouseleave fires on the element and it terminates your drag. Instead take advantage of the event bubbling and add your handler to a sufficiently large parent container or the window itself. Fire up mouseup on the window/container if and only if it has been previoulsy activated by mousedown. If you want you can also remove and re attach the handler on window on mousedown on the element if you want to save some computation. But I left it:

https://jsfiddle.net/ibowankenobi/gd1e93a3/1/

const shadowStytle = "10px 10px 12px #888888";

const appRef = document.getElementById('app');
appRef.innerHTML = `<div class="box" id="box"></div>`;

const boxRef = document.getElementById("box");
const xOffset = boxRef.clientWidth / 2;
const yOffset = boxRef.clientHeight / 2;

let selectionLocked = false;

function lockSelection() {
  selectionLocked = true;
  boxRef.style.boxShadow = shadowStytle;
  boxRef.style.backgroundColor = "red";
}

function unlockSelection() {
  selectionLocked = false;
  boxRef.style.boxShadow = "none";
  boxRef.style.backgroundColor = "black";
}

unlockSelection();

boxRef.addEventListener("mousedown", (arg) => {
  lockSelection();
});

window.addEventListener("mouseup", (arg) => {
  selectionLocked && unlockSelection();
});

boxRef.addEventListener("mouseleave", (arg) => {
  /*if (selectionLocked) {
    selectionLocked = false;
    boxRef.style.boxShadow = "none";
  }*/
});

window.addEventListener("mousemove", (arg) => {
  if (selectionLocked) {
    boxRef.style.left = `${arg.clientX - xOffset}px`;
    boxRef.style.top = `${arg.clientY - yOffset}px`;
  }
});

Java Robot mouse move: setting speed?

The Robot class has a delay(...) method that you can use to control movement from point to point. Try a few different alogorithms to determine what you like.

Track mouse speed with JS

Sparklines has a nifty example of tracking mouse movement and graphing it. Their code is available in the source of their site starting at line 315.

Simple and effective.

Here is the code:

 var mrefreshinterval = 500; // update display every 500ms
 var lastmousex=-1; 
 var lastmousey=-1;
 var lastmousetime;
 var mousetravel = 0;
 $('html').mousemove(function(e) {
     var mousex = e.pageX;
     var mousey = e.pageY;
     if (lastmousex > -1)
         mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
     lastmousex = mousex;
     lastmousey = mousey;
 });