title: event listener with Pointerup not firing when activated from touchscreen
body: <p>I'm coding a simple javascript drawing program using an HTML canvas, it will allow you to draw a line, and change the color of said line via a button, and see which color you have selected using a <p> element and some javascript involving innerText, and it works great,  when used with a mouse or trackpad, however when it's used on touchscreen it draws a short bit of line then stops. I have tracked the problem to the pointerup event, but I have no idea what exactly is going wrong with it. See for yourself-</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id='dr' width = '640' height = '480' &gt;&lt;/canvas&gt;
  &lt;div style = 'width: 35%; margin: auto; ' id = 'ClearAndColor'&gt;
  &lt;button onclick = 'switchColor()'&gt; Change color&lt;/button&gt;
  &lt;button onclick = 'clean()' &gt; clear drawing program&lt;/button&gt;
  &lt;p id = 'color'&gt;black&lt;/p&gt;
  &lt;/div&gt;
  &lt;p id = 'p'&gt;&lt;/p&gt;
  &lt;script&gt;
  var canvas = document.getElementById('dr');
  var ctx = canvas.getContext('2d');
  var line = false
  
  function drawType() {
    if (line === true) {
      line = false;
    } else {
      line = true;
    }
   }
  
   var drawing = false;
  
   function Type() {}
   //start the drawing if the mouse is down
   canvas.addEventListener("pointerdown", () =&gt; {
     drawing = true;
   })
   //stop the drawing if the mouse is up
   canvas.addEventListener("pointerup", () =&gt; {
     drawing = false;
   });
   //add an event listener to the canvas for when the user moves the 
   //mouse over it and the mouse is down
    var colors = ['DarkRed', 'DarkOrange', 'Gold', 'Green', 
    'MediumBlue', 'Indigo', 'Violet', 'Black']
     var displayColors = ['r', 'Red', 'Orange', 'Yellow', 'Green', 
     'Blue', 'Indigo', 'Violet', 'Black']
     var selector = 0
     var color = document.getElementById('color')
     var selectedColor = colors[selector];
     
     function switchColor() {
    if (selector &lt; 8) {
      selector = selector + 1;
    } else {
      selector = 1;
    }
    color.innerText = displayColors[selector];
    selectedColor = colors[selector];
    }
     
   canvas.addEventListener('pointermove', (event) =&gt; {
   // this right here \/ is just for logging purposes.
   var p = document.getElementById('p')
   p.innerText = drawing;
  
  
  
    //if the drawing mode is true (if the mouse button is down)
    if (drawing == true) {
  
      //put the rectangle on the canvas at the coordinates of the 
       //mouse
      ctx.fillStyle = colors[selector-1];
      ctx.fillRect(event.clientX, event.clientY, 4, 4)
    }
  
     });
  
    //onMouseDown onMouseMove onMouseUp onTouchEnd
   function clean() {
    var canvas = document.getElementById('dr');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 640, 480);
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>