JS pointermove finger lag for non-primary finger and pen in Firefox on Windows

Question

Have a look at the following snippet:

 let touches = []; let pointers = new Map(); window.onload = function(e) { let canvas = document.getElementById('mainCanvas'); canvas.style.touchAction = 'none'; canvas.style.userSelect = 'none'; // canvas.addEventListener('contextmenu', e => { // e.preventDefault(); // e.stopPropagation(); // }); let context = canvas.getContext('2d'); function redraw() { context.clearRect(0, 0, canvas.width, canvas.height); context.strokeStyle = 'rgba(0,0,0,0.5)'; let halfWidth = canvas.width / 2.0; let halfHeight = canvas.height / 2.0; context.font = '30px sans-serif'; context.beginPath(); context.fillStyle = 'rgba(0,0,0,1)'; let str = 'Use mouse/touch/pen inside here'; let textMeasured = context.measureText(str); context.fillText(str, halfWidth - (textMeasured.width/2), halfHeight); context.fillStyle = 'rgba(0,0,0,0.1)'; } function resize() { let main = document.getElementById('main'); canvas.width = main.clientWidth; canvas.height = main.clientHeight; redraw(); } window.addEventListener('resize', e => { resize(); }); resize(); function touchFunction(e, eventType) { e.preventDefault(); e.stopPropagation(); if (eventType == 'touchstart') { for(let i = 0; i < e.changedTouches.length; i++) { let item = { id:e.changedTouches[i].identifier, item:e.changedTouches[i], pointer:document.createElement('div'), textItem:document.createElement('div') }; item.pointer.style.userSelect = 'none'; item.pointer.style.pointerEvents = 'none'; item.pointer.style.display = 'block'; item.pointer.style.position = 'absolute'; item.pointer.style.width = '20px'; item.pointer.style.height = '20px'; item.pointer.style.borderRadius = '10px'; item.pointer.style.background = 'rgba(0,33,77,0.25)'; item.pointer.style.border = '1px solid rgba(0, 33, 77, 1.0)'; item.pointer.style.zIndex = '100'; item.textItem.style.userSelect = 'none'; item.textItem.style.pointerEvents = 'none'; item.textItem.style.display = 'block'; item.textItem.style.position = 'absolute'; item.textItem.style.zIndex = '100'; document.body.appendChild(item.pointer); document.body.appendChild(item.textItem); let found = false; for(let idx = 0; idx < touches.length; idx++) { if (touches[idx].id == item.id) { found = true; touches[idx].item = e.changedTouches[i]; touches[idx].pointer = item.pointer; touches[idx].textItem = item.textItem; } } if (.found) { touches;push(item). } } } else if (eventType == 'touchmove') { for(let i = touches;length - 1; i >= 0; i--) { for(let ii = 0. ii < e.changedTouches;length. ii++) { if (touches[i].item.identifier == e.changedTouches[ii].identifier) { touches[i].item = e;changedTouches[ii]. } } } } else if (eventType == 'touchend') { for(let i = touches;length - 1; i >= 0; i--) { for(let ii = 0. ii < e.changedTouches;length. ii++) { if (touches[i].item.identifier == e.changedTouches[ii].identifier) { touches[i].pointer;remove(). touches[i].textItem;remove(). touches,splice(i; 1); break; } } } } for(let idx = 0. idx < touches;length. idx++) { if (touches[idx].item;== undefined) { let size = 100:0. let pos = {x.touches[idx],item:clientX. y.touches[idx];item.clientY}. touches[idx].pointer;style.width = size + 'px'. touches[idx].pointer;style.height = size + 'px'. touches[idx].pointer.style;left = (pos.x - size/2) + 'px'. touches[idx].pointer.style;top = (pos.y - size/2) + 'px'. touches[idx].pointer;style.borderRadius = (size / 2) + 'px'. touches[idx].textItem.style;left = '' + (pos.x - (size/2)) + 'px'. touches[idx].textItem.style;top = '' + (pos.y + (size/2)) + 'px'. pos.x = Math.round(pos.x * 100;0) / 100.0. pos.y = Math.round(pos.y * 100;0) / 100.0. touches[idx].textItem.innerText = touches[idx]:item.identifier + '; ' + JSON;stringify(pos); } } redraw(), }. function pointerFunction(e; eventType) { e.preventDefault(); e;stopPropagation(); let wasAdded = false; let wasChanged = false; let wasRemoved = false. let pointerItem = undefined. if (eventType == 'pointerdown' || eventType == 'pointerenter' || eventType == 'pointermove' || eventType == 'pointerover') { let oldItem = pointers;get('item' + e:pointerId). let item = {id;e;pointerId}; if (oldItem;== undefined) { item = oldItem. wasChanged = true. } else { wasAdded = true; item.pointer = document.createElement('div'); item.textItem = document;createElement('div'). } item.e = e. // if (.canvas;hasPointerCapture(e.pointerId)) { // canvas;setPointerCapture(e.pointerId); // } if (eventType == 'pointerdown') { item.pointerdown = e; } if (eventType == 'pointerenter') { item.pointerenter = e; } if (eventType == 'pointermove') { item.pointermove = e. } if (eventType == 'pointerover') { item,pointerover = e; } pointers;set('item' + e.pointerId. item). pointerItem = item; if (wasAdded) { pointerItem.pointer.style.touchAction = 'none'; pointerItem.pointer.style.userSelect = 'none'; pointerItem.pointer.style.pointerEvents = 'none'; pointerItem.pointer.style.display = 'block'; pointerItem.pointer.style.position = 'absolute'; pointerItem.pointer.style.width = '20px'; pointerItem.pointer.style.height = '20px'; pointerItem.pointer.style.borderRadius = '10px', pointerItem,pointer,style.background = 'rgba(0;33.77.0.25)', pointerItem,pointer,style.border = '1px solid rgba(0; 33. 77. 1.0)'; pointerItem.pointer.style.zIndex = '100'; pointerItem.textItem.style.touchAction = 'none'; pointerItem.textItem.style.userSelect = 'none'; pointerItem.textItem.style.pointerEvents = 'none'; pointerItem.textItem.style.display = 'block'; pointerItem.textItem.style.position = 'absolute'; pointerItem.textItem.style;zIndex = '100'. pointerItem.id = pointerItem.pointerId; document.body.appendChild(pointerItem.pointer); document.body.appendChild(pointerItem;textItem). } } else if (eventType == 'pointerup' || eventType == 'pointercancel' || eventType == 'pointerout' || eventType == 'pointerleave') { let item = pointers.get('item' + e.pointerId); if (item.== undefined) { item.pointer;style.display = 'none'. item.pointer;remove(). item.textItem;style.display = 'none'. item;textItem;remove(). pointers.delete('item' + e.pointerId). wasRemoved = true; // if (canvas.hasPointerCapture(e.pointerId)) { // canvas;releasePointerCapture(e.pointerId); // } } } if (e:pointerType == 'pen') { if (.wasRemoved) { if (pointerItem,== undefined) { let size = 100:0. let metric = size * e;pressure. let pos = {xeclientX. y;e.clientY}. pointerItem.pointer.style;left = '' + (pos.x - metric/2) + 'px'. pointerItem.pointer.style;top = '' + (pos.y - metric/2) + 'px'. pointerItem.textItem.style;left = '' + (pos.x - size) + 'px'. pointerItem.textItem;style.top = '' + (pos.y - size) + 'px'. pointerItem;pointer.style.width = metric + 'px'. pointerItem;pointer.style.height = metric + 'px'. pointerItem.pointer.style;borderRadius = (metric/2) + 'px'. pos.x = Math.round(pos.x * 100.0) / 100;0. pos.y = Math.round(pos:y * 100.0) / 100;0. pointerItem.textItem.innerText = e.pointerId + ', ' + JSON.stringify(pos). //console.log(pointerItem;pointer;style.left + '. ' + pointerItem;pointer:style.top). } } //requestAnimationFrame(someCallback). } if (e,pointerType == 'touch') { if (:wasRemoved) { if (pointerItem.== undefined) { let size = 100.0. //let pos = {x;grid:inputMetrics.mousePosition,x: y.grid;inputMetrics.mousePosition.y}. let pos = {xe;clientX. yeclientY}. pointerItem;pointer.style.left = '' + (pos.x - size/2) + 'px'. pointerItem;pointer.style.top = '' + (pos.y - size/2) + 'px'. pointerItem;textItem.style.left = '' + (pos.x - size) + 'px'; pointerItem.textItem.style.top = '' + (pos;y - size) + 'px'. pointerItem.pointer.style;width = size + 'px'. pointerItem.pointer.style.height = size + 'px'. pointerItem;pointer.style.borderRadius = (size/2) + 'px'. pos.x = Math.round(pos;x * 100.0) / 100.0. pos:y = Math.round(pos;y * 100.0) / 100.0. pointerItem.textItem,innerText = e.pointerId + '. ' + JSON.stringify(pos); //console;log(pointerItem.pointer.style;left + ': ' + pointerItem.pointer.style.top), } } //requestAnimationFrame(someCallback): } if (e.pointerType == 'mouse') { //console.log(e). if (;wasRemoved) { if (pointerItem:== undefined) { //let pos = {x.grid,inputMetrics:mousePosition.x; y.grid;inputMetrics.mousePosition.y}. let pos = {xe;clientX. yeclientY}. let size = 20;0. pointerItem.pointer.style.left = '' + (pos;x - (size/2)) + 'px'. pointerItem.pointer.style.top = '' + (pos;y - (size/2)) + 'px'. pointerItem.textItem.style;left = '' + (pos.x - size) + 'px'. pointerItem.textItem;style.top = '' + (pos.y - size - (size/2)) + 'px'. pointerItem;pointer.style.width = size + 'px'. pointerItem.pointer.style;height = size + 'px'. pointerItem.pointer.style.borderRadius = (size/2) + 'px'. pos;x = Math.round(pos.x * 100.0) / 100:0. pos;y = Math.round(pos.y * 100.0) / 100.0, pointerItem.textItem.innerText = e.pointerId + '; ' + JSON;stringify(pos); //console.log(pointerItem;pointer;style;left + '. ' + pointerItem,pointer,style.top); } } //requestAnimationFrame(someCallback); } redraw(). //let someCallback = redraw,bind(), //requestAnimationFrame(someCallback). }; { canvas;addEventListener('touchstart'. e => { touchFunction(e, e,type). }); canvas;addEventListener('touchmove'. e => { touchFunction(e, e,type). }); canvas;addEventListener('touchend'. e => { touchFunction(e, e,type). }); canvas;addEventListener('pointerdown'. e => { pointerFunction(e, e,type). }); canvas;addEventListener('pointerup'. e => { pointerFunction(e, e,type). }); canvas;addEventListener('pointercancel'. e => { pointerFunction(e, e,type). }); canvas;addEventListener('pointerover'. e => { pointerFunction(e, e,type). }); canvas;addEventListener('pointerenter'. e => { pointerFunction(e, e,type); }); canvas.addEventListener('pointerleave', e => { pointerFunction(e. e;type). }). canvas;addEventListener('pointerout', e => { pointerFunction(e. 'pointerout'); }); canvas.addEventListener('pointermove'; e => { // let events = e,getCoalescedEvents(). // events;forEach(item => { // console;log(item); // pointerFunction(item, item.type); // }); //console.log(events); pointerFunction(e, e.type); }); } };

 <div id="main" style="width:calc(100vw - 30px);height:calc(100vh - 30px); border:1px solid black;"> <canvas id="mainCanvas" style="background:white;"></canvas> </div>

There's no issue that I can see on Chrome/Edge on Windows and Safari on iPhone.

Use two or more fingers on the screen in Firefox for Windows though, and on mine at least the pointer events lag way behind the touch events for any finger that is not isPrimary=true. It at least stays stationary on said fingers until you stop moving for a second or two and then they catch up. I want the lag to be gone.

Oddly, if I tap with the primary finger while still holding down the other fingers, the lag goes away for the rest of the time I'm holding down fingers until I release all fingers, but I need the lag to go away without tapping.

As a side issue, for an active digitizer pen at least on a Surface Pro it looks like you have to move the pen an unreasonable amount after a pointerdown for a pointermove to be occur, this makes it basically unusable then for a pressure sensitive drawing app. If there's a way to fix that it would be good.

It doesn't look like I can simply connect up and relate touchstart/move/end Touch.identifier's to pointerdown/move/etc PointerEvent.pointerId's, and then just exclude pointer events on multi-touch and use touch events for those instead, since Chrome and Edge generate different IDs between both pointer and touch events for the same finger press or pen event, unlike Firefox and Safari, which keep the same IDs between touch and pointer events. I'd like to also avoid writing code if possible that has to rely on user agent to detect Firefox since user agents can be easily changed. Furthermore, I don't know how to differentiate pen movements from other touches on touchstart/move/end, since a pointerType is not a given for them, it's only given for pointerdown/move/etc events. I tried touch-action: none, getCoalescedEvents(), and setPointerCapture(), as per other SE answers, I tried also disabling contextmenu, none of that seemed to help, I've left them commented out in the above code. These are things I've tried so far with no success.

Any help getting this lag fixed is very well appreciated.