Chrome/ium incorrectly reporting OnPointerDown events for touch input

Question

I'll skip the story of how I got here, but I'm trying to show the coordinates of touch or click events in the browser window as a sort of diagnostic/demo thing.

The basic code is this:

    document.addEventListener('pointerdown', (event) => {
        var x = 0;
        var y = 0;
        if (event.pointerType === "mouse")
        {
            x = event.clientX;
            y = event.clientY;
        }
        else if (event.pointerType === "touch")
        {
            x = event.touches[0].clientX;
            y = event.touches[0].clientY;
        }
        //else if (event.pointerType === "pen") {}
        document.getElementById("demo").innerHTML = "x = " + x + ", y = " + y + "<br>" + event.pointerType;
        console.log(event);
    });

Now, this is pretty simple and pulled right from the most obvious examples found on google (MDN / W3C / etc.)

All I'm doing in the document is filling the screen with a table of cells to make a grid so that we can easily show where clicks happened:

    $('table').on('click', 'td', function()
    {
        $(this).addClass("active"); // Add colour to show cell got clicked
    });

This just changes the colour of the table cell where the click happened, to give visual feedback.

On Firefox it works as expected - when you click a table cell it changes colour and the "demo" div gets populated with X and Y coordinates and a source name, although it's worth saying Firefox reports the event as "mouse".

In Chromium, the cells still react to the click & change colour but the event listener throws an error. Chromium gives me the following errors in the console:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at HTMLDocument.<anonymous> (tt.html:123:23)

Which looks to me like the event/callback is happening but Chromium is not getting or perhaps not passing on the correct event type to the code?

To summarise:

| Reports...  | Firefox | Chromium |
|-------------|---------|----------|
| Mouse click | 'mouse' | 'mouse'  |
| Touch       | 'mouse' | Error    |

Anyone seen this or got any idea what I'm doing wrong here?

Edit to add: I've got some code working that hooks the following:

canvas.addEventListener('touchstart', handleStart);
canvas.addEventListener('touchend', handleEnd);
canvas.addEventListener('touchcancel', handleCancel);
canvas.addEventListener('touchmove', handleMove);

So that's a clue, unfortunately I've got to drop this for the time being due to higher priority things.

The code to draw a dot where the touch happens is:

function handleStart(evt) {
          evt.preventDefault();
          const touches = evt.changedTouches;
          offsetX = canvas.getBoundingClientRect().left;
          offsetY = canvas.getBoundingClientRect().top;
          for (let i = 0; i < touches.length; i++) {
                        context.beginPath();
                        context.arc(touches[i].clientX - offsetX, touches[i].clientY - offsetY, gline/2, 0, 2 * Math.PI);
                        context.fill();
                        context.closePath();
          }
        }

Hopefully this helps someone.