Why is e.touches[] faster in Chrome when Inspector is open?

Question

I have a site (live on https://digitaalwisbordje.nl/84734059348524305/Stackoverflow/ ) where a user could write in a <canvas>. In Chrome and on Chromebook, the drawing works fine with the mouse.

With touchscreen it doesnt... it's way to slow to draw a circle fast. ... Until you open Inspector (F12 in Chrome). Then all works well.

Why is it faster when Inspector is opened? And how go to get always that fast respons? This is my main goal now! Best test is to draw a circle very fast using touch.

function findxy_touch(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            console.log(e.touches);
            currX = e.touches["0"].clientX - canvas.getBoundingClientRect().left;
            currY = e.touches["0"].clientY - canvas.getBoundingClientRect().top;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                //console.log(prevX);

                // pak touch en muis!
                currX = e.touches["0"].clientX - canvas.getBoundingClientRect().left;
                currY = e.touches["0"].clientY - canvas.getBoundingClientRect().top;
                draw();
            }
        }

Answer 1

Just by using the code of https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/ (and that links to https://zipso.net/sketchpad/sketchpad-lines.txt) I made it working. With this new code the touch-events are handled better and faster and thus got it working.

My first code shouldnt be used, use the working one instead.