title: Touch move is really slow
body: <p>I'm building a paint-like feature where the user can draw a line, but the touchmove event gets emitted really slow on my device (android phone), so the line becomes edgy. As soon as I connect the device to my PC and open the chrome devtools via USB debugging, everything works fine. On the phone emulator in desktop-chrome aren't any problems.</p>
  <p>Here is a screenshot. The inner circle was drawn with the slow touch events, and for the outer one I connected the device to my PC.</p>
  <p><a href="https://i.stack.imgur.com/64jW2m.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/64jW2m.jpg" alt="Screenshot" /></a></p>
  <p>Here is another screenshot showing the durations between individual &quot;touchmove&quot; event-calls. The top part (green values) occured when the devtools were open, the bottom part (red values) when they were closed.</p>
  <p><a href="https://i.stack.imgur.com/2VU0wl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2VU0wl.png" alt="Screenshot" /></a></p>
  <p>The code:</p>
  <pre class="lang-js prettyprint-override"><code>function DrawingCanvas(/* ... */) {
      // ...
  
      const handleTouchMove = (event) =&gt; {
          handleMouseMove(event.touches[0])
      }
  
      const handleMouseMove = ({ clientX, clientY }) =&gt; {
          if (!isDrawing) {
              return
          }
  
          const canvasRect = canvas.getBoundingClientRect()
          const x = clientX - canvasRect.x
          const y = clientY - canvasRect.y
  
          currentPath.current.addPoint([x, y])
          update()
      }
  
      const update = () =&gt; {
          clearCanvas()
          drawPath()
      }
  
      // ...
  
      useEffect(() =&gt; {
          const drawingCanvas = drawingCanvasRef.current
  
          // ...
  
          drawingCanvas.addEventListener(&quot;touchstart&quot;, handleDrawStart)
          drawingCanvas.addEventListener(&quot;touchend&quot;, handleDrawEnd)
          drawingCanvas.addEventListener(&quot;touchcancel&quot;, handleDrawEnd)
          drawingCanvas.addEventListener(&quot;touchmove&quot;, handleTouchMove)
          
          drawingCanvas.addEventListener(&quot;mousedown&quot;, handleDrawStart)
          drawingCanvas.addEventListener(&quot;mouseup&quot;, handleDrawEnd)
          drawingCanvas.addEventListener(&quot;mousemove&quot;, handleMouseMove)
          
          return () =&gt; {
              drawingCanvas.removeEventListener(&quot;touchstart&quot;, handleDrawStart)
              drawingCanvas.removeEventListener(&quot;touchmove&quot;, handleTouchMove)
              drawingCanvas.removeEventListener(&quot;touchend&quot;, handleDrawEnd)
              drawingCanvas.removeEventListener(&quot;touchcancel&quot;, handleDrawEnd)
  
              drawingCanvas.removeEventListener(&quot;mousedown&quot;, handleDrawStart)
              drawingCanvas.removeEventListener(&quot;mouseup&quot;, handleDrawEnd)
              drawingCanvas.removeEventListener(&quot;mousemove&quot;, handleMouseMove)
          }
      })
  
      return &lt;canvas /* ... */ /&gt;
  }
  </code></pre>
  <p>Does anyone have an idea on how to fix this?<br />
  You can test it by yourself on the website: <a href="https://www.easymeme69.com/editor" rel="nofollow noreferrer">https://www.easymeme69.com/editor</a></p>