[churnedgodotdev]

The cursor lag is really bad, particularly on Windows, but there are at least 2 ways the lag could be much lower:

1. Use 'desynchronized', e.g. canvas.getContext("2d", { desynchronized: true });

2. Instead of using requestAnimationFrame(), draw as soon as a move event is received.

Here's a paint app that uses techniques 1 and 2 to achieve much lower input lag drawing the pen strokes that chase the cursor:

https://paint.js.org/

Two other tricks to be aware of:

3. [Chromium only.] Use 'pointerrawmove' to get move events as soon as they happen instead of waiting for a big bunch of coalesced moves to all arrive after a delay.

4. Drawing where the cursor is predicted to be in order to compensate for lag works well during smooth cursor/pen motion. For example, the Windows Snip & Sketch tool actually renders the line you are drawing in front of the direction your pen tip is detected traveling because when using, say, a Microsoft Surface Pen on a physical Surface Pro screen the line being drawn would otherwise noticeably lag behind the physical pen tip (especially on a 60Hz screen) unless this predictive trick is used.

Finally, be aware of open Chromium issue #992954. When the devtools are open [F12], coalesced events aren't used so you get lower input lag but more events to pump (like 'pointerrawmove'). This bug is maddening because it depends on whether or not you have the debugger open!

https://bugs.chromium.org/p/chromium/issues/detail?id=992954

[andai]

No lag on my 6 year old iPhone. (I wasn't even expecting the site to work on it!)

Thanks for the tips, I make interactive art and creative tools these will come in very handy.

On a related note (input lag), I noticed in my high speed recordings that even programs with no input delay (mspaint) lag 1 frame behind the mouse cursor, something to do with double buffering (and the cursor being rendered separately by the GPU?) Is there any way to get around that on Windows, eg. in fullscreen?

I.e. instead of predicting where the cursor will be to compensate for the fact that everything is rendered 1 frame late, can we just make it render on time?

[churnedgodotdev]

> can we just make it render on time?

Oh, time to go down a low-latency rabbit hole. Start here:

https://raphlinus.github.io/ui/graphics/2020/09/13/composito...

Some key mentions: Windows has a hardware overlay API. A hardware overlay is why the OS mouse cursor renders with low latency even with 'vsync on'.

For fullscreen, the ultimate in tear-free low latency is beam racing. Search for 'blur busters beam racing' to go down that rabbit hole.