event listener with Pointerup not firing when activated from touchscreen

Question

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

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-

<canvas id='dr' width = '640' height = '480' ></canvas>
<div style = 'width: 35%; margin: auto; ' id = 'ClearAndColor'>
<button onclick = 'switchColor()'> Change color</button>
<button onclick = 'clean()' > clear drawing program</button>
<p id = 'color'>black</p>
</div>
<p id = 'p'></p>
<script>
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", () => {
   drawing = true;
 })
 //stop the drawing if the mouse is up
 canvas.addEventListener("pointerup", () => {
   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 < 8) {
    selector = selector + 1;
  } else {
    selector = 1;
  }
  color.innerText = displayColors[selector];
  selectedColor = colors[selector];
  }
   
 canvas.addEventListener('pointermove', (event) => {
 // 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);
}
</script>