title: PointerEvent stops firing after a short time
body: <p>I'm currently trying to get a similar touch/stylus behaviour to Squid (the notetaking app). I have used the <code>PointerEvent</code> API and it all works, except for one annoying issue:
  After I put down the stylus or the finger, it draws a stroke for the next ~0.3 seconds, but after that, no more <code>pointermove</code> events are fired as long as the pointer is down.</p>
  <p>here's my code:</p>
  <p><code>index.html</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Draw&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id=&quot;canvas&quot; width=&quot;500px&quot; height=&quot;500px&quot; style=&quot; position: absolute;border: 2px solid red;&quot;&gt;&lt;/canvas&gt;
      &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><code>index.js</code></p>
  <pre class="lang-js prettyprint-override"><code>var canvas = document.querySelector(&quot;#canvas&quot;);
  var ctx = canvas.getContext(&quot;2d&quot;);
  
  ctx.fillStyle = &quot;white&quot;
  
  var pos = {}
  
  canvas.addEventListener(&quot;pointerdown&quot;, function (e) {
      pos.x = e.pageX;
      pos.y = e.pageY;
  });
  
  canvas.addEventListener(&quot;pointermove&quot;, function (e) {
      console.log(e.pressure)
  
      switch (e.pointerType) {
          case &quot;pen&quot;:
              ctx.beginPath();
              ctx.moveTo(pos.x, pos.y);
              ctx.lineTo(e.pageX, e.pageY);
              ctx.stroke();
  
              pos.x = e.pageX;
              pos.y = e.pageY;
  
              break;
          case &quot;touch&quot;:
              ctx.fillRect(e.pageX - 10, e.pageY - 10, 20, 20);
  
              break;
      }
  });
  </code></pre>
  <p><code>index.css</code> is just a css reset</p>
  <p>I'm really confused over this and can't seem to find anyone else who had this problem. Any help would be appreciated!</p>