1

A few days ago, I was wondering about why my canvas is not working properly. I'm using szimek's library to create signatures and sometimes those pen strokes looked a bit crazy. I also tested on Edge (which ended in the same result as Chrome) and TOR (worked as it should).

Yesterday, I found the solution why this happens randomly. My strokes look crazy during the usage of the browsers developer console when it's open. If it's closed, they're looking normally (when drawing again).

Does anyone know why this happened or is it caused by it's core engines? Here's an example of what I mean:enter image description here

Thank you.

blex
  • 24,941
  • 5
  • 39
  • 72
Pinnokkio
  • 439
  • 1
  • 5
  • 10
  • 3
    If you're logging something to the console in a mouse/touchmove eventhandler function, it can have a dramatic influence to the performance. – Teemu Dec 14 '20 at 17:45
  • @Teemu This didn't happen until a month ago or something. – Pinnokkio Dec 14 '20 at 18:24
  • 1
    a fiddle would be handy that replicates the problem, seems fine on an online canvas application I just opened so it is either your code or the library it would seem (does the library have a demo could you could link to that). – GrahamTheDev Dec 14 '20 at 19:01
  • Please may you include a [mcve] of the code you're using? – evolutionxbox Dec 15 '20 at 11:44

1 Answers1

3

This happens because in Chromium (and in Gecko), as per specs recommendations, UI events like mousemove or pointermove are throttled to the frame refresh rate of the monitor.

However, in Chromium only and for whatever reason, when the dev tools are open, they emit the raw events...
So when dev tools are closed, even though the hardware pointer (e.g mouse) did emit more events, these have been coalesced into a single pointermove event, which may draw lines smoother to the eye since each point have been averaged, but you actually received less data.

You can retrieve the list of raw events from the pointermove event's getCoallescedEvents, as exposed in this other answer of mine, and from these you could also build up the coalescing logic yourself if needed (using requestAnimationFrame() as a throttler, that's exactly what Chromium does).

As to why Chromium does disable the coalescing when dev-tools are open... that's still a mystery for me, but I never got enough incentive to look this up.

Kaiido
  • 123,334
  • 13
  • 219
  • 285