Reactjs onPointer event not functioning properly on mobile browsers - reactjs

Question

I am trying to make a finger-painting canvas, which should work on mobile browsers.
My canvas is working properly on pc browsers (by mouse), but not on mobile browsers. The strokes just disappear even if my finger did not leave the screen.
Is it because the swipe gestures in Chrome (which I am using) overwrite the onPointerMove event on some time point?
You can try my canvas here (my server is not always on). The whole project contains too much code unrelated to this issue so I am not posting those code here.
And my code for Canvas.js is like this:
// canvas.js
// modified from https://pusher.com/tutorials/live-paint-react
import React, { Component } from 'react';
class Canvas extends Component {
constructor(props) {
super(props);
this.onPointerDown = this.onPointerDown.bind(this);
this.onPointerMove = this.onPointerMove.bind(this);
this.endPaintEvent = this.endPaintEvent.bind(this);
}
isPainting = false;
userStrokeStyle = '#EE92C2';
line = [];
prevPos = { offsetX: 0, offsetY: 0 };
onPointerDown({ nativeEvent }) {
const { offsetX, offsetY } = nativeEvent;
this.isPainting = true;
this.prevPos = { offsetX, offsetY };
}
onPointerMove({ nativeEvent }) {
if (this.isPainting) {
const { offsetX, offsetY } = nativeEvent;
const offSetData = { offsetX, offsetY };
// Set the start and stop position of the paint event.
const positionData = {
start: { ...this.prevPos },
stop: { ...offSetData },
};
// Add the position to the line array
this.line = this.line.concat(positionData);
this.paint(this.prevPos, offSetData, this.userStrokeStyle);
}
}
endPaintEvent() {
if (this.isPainting) {
this.isPainting = false;
//this.sendPaintData();
}
}
paint(prevPos, currPos, strokeStyle) {
const { offsetX, offsetY } = currPos;
const { offsetX: x, offsetY: y } = prevPos;
this.ctx.beginPath();
this.ctx.strokeStyle = strokeStyle;
// Move the the prevPosition of the mouse
this.ctx.moveTo(x, y);
// Draw a line to the current position of the mouse
this.ctx.lineTo(offsetX, offsetY);
// Visualize the line using the strokeStyle
this.ctx.stroke();
this.prevPos = { offsetX, offsetY };
}
componentDidMount() {
// Here we set up the properties of the canvas element.
this.canvas.width = 1000;
this.canvas.height = 800;
this.ctx = this.canvas.getContext('2d');
this.ctx.lineJoin = 'round';
this.ctx.lineCap = 'round';
this.ctx.lineWidth = 5;
}
render() {
return (
<canvas
// We use the ref attribute to get direct access to the canvas element.
ref={(ref) => (this.canvas = ref)}
style={{ background: 'black' }}
onPointerDown={this.onPointerDown}
onPointerUp={this.endPaintEvent}
onPointerMove={this.onPointerMove}
/>
);
}
}
export default Canvas;
I tried to disable the scrolling and zooming by these code:
index.css
html, body {
overflow-x:hidden;
overflow-y:hidden;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
index.html
<script>
document.body.addEventListener("touchstart", function (e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function (e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function (e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
</script>
And I change onPointer events to onTouch events (simply change onPointer to onTouch
e.g. onPointerDown -> onTouchStart
But nothing happened when I draw on the canvas, I am not sure whether I am implementing onTouch events correctly.