How to listen to coordinate changes on a canvas via a mobile device?

Question

I created this component in Angular that has a canvas and when the user clicks and drags on that frame, the canvas is filled with coordinates positions.

I tried to reproduce this same behavior in a cell phone, but when I click and drag the coordinates apparently are not being picked up correctly.

How I can hear coordinate changes on a canvas via a mobile device?

My template:

<div class="wrapper">
  <canvas #canvas id="drawer" width="300" height="300"></canvas>
</div>

My component:

@ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement>;
  isDrawing = false;
  coordX = 0;
  coordY = 0;
  context;

  constructor(private elementRef: ElementRef, private renderer2: Renderer2) {}

  ngAfterViewInit() {
    this.context = this.getContext2d();
    this.listenToCursorDownChanges();
    this.listenToCursorMoveChanges();
    this.listenToCursorUpChanges();
  }

  getContext2d() {
    return this.elementRef.nativeElement
      .querySelector('#drawer')
      .getContext('2d');
  }

  listenToCursorDownChanges() {
    this.canvas.nativeElement.addEventListener('mousedown', (e) => {
      this.coordX = e.offsetX;
      this.coordY = e.offsetY;
      this.isDrawing = true;
    });
  }

  listenToCursorMoveChanges() {
    this.canvas.nativeElement.addEventListener('mousemove', (e) => {
      if (this.isDrawing === true) {
        this.drawLine(
          this.context,
          this.coordX,
          this.coordY,
          e.offsetX,
          e.offsetY
        );
        this.coordX = e.offsetX;
        this.coordY = e.offsetY;
      }
    });
  }

  listenToCursorUpChanges() {
    this.canvas.nativeElement.addEventListener('mouseup', (e) => {
      if (this.isDrawing) {
        this.drawLine(
          this.context,
          this.coordX,
          this.coordY,
          e.offsetX,
          e.offsetY
        );
        this.coordX = 0;
        this.coordY = 0;
        this.isDrawing = false;
      }
    });
  }

  listenToTouchEvents() {
    this.canvas.nativeElement.addEventListener(
      'touchmove',
      (e) => {
        const touch = e.touches[0];
        const mouseEvent = new MouseEvent('mousemove', {
          clientX: touch.clientX,
          clientY: touch.clientY,
        });
        this.drawLine(
          this.context,
          mouseEvent.clientX,
          mouseEvent.clientY,
          mouseEvent.offsetX,
          mouseEvent.offsetY
        );
      },
      false
    );
  }

  drawLine(context, x1, y1, x2, y2) {
    context.beginPath();
    context.strokeStyle = 'black';
    context.lineWidth = 1;
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
    context.closePath();
  }

I’m using the function listenToTouchEvents() when there are touches on the screen and apparently the client x and offset values are correct and passed to drawLine, but apparently there is still something wrong and my canvas is not being painted.