onPointerMove not doing anything

[odysseaspapadimas]

Helloooo, so I've been trying to build like a skribble.io clone and I'm currently working on the canvas but onPointerMove does not seem to work at all.

<Canvas
      ref={canvasRef}
      height="600px"
      width="600px"
      canvasColor="white"
      allowOnlyPointerType="all"
      backgroundImage=""
      style={{
        border: "0.0625rem solid #9c9c9c",
        borderRadius: "0.25rem",
      }}
      exportWithBackgroundImage={false}
      preserveBackgroundImageAspectRatio=""
      paths={paths}
      isDrawing={isDrawing}
      onPointerDown={onPointerDown}
      onPointerMove={(e) => console.log('move', e)}
      onPointerUp={onPointerUp}
    />

I basically copied issue #14 but with hooks but when I move the pointer nothing gets logged out
onPointerDown and onPointerUp work just fine

[odysseaspapadimas]

Actually my bad...
Looked inside the canvas code and realised isDrawing needs to be true in order to run onPointerMove and after correcting that it works fine, but it's extremely laggy, funny thing is, it is laggier for the user drawing rather than the one receiving, any workarounds for that?

[vinothpandian]

The example code of issue #14 is a naive implementation where the user drawing is also sent directly to the server and drawn on the canvas after the socket broadcasts the sketch back. That's why it is laggy. In a proper optimized implementation, you'll have to maintain two states and merge them while handing edge cases like slow server, etc.