Проблема с тем, чтобы сделать этот скретч-компонент удобным для мобильных устройств. ⇐ CSS

[Anonymous]

У меня есть компонент скраббера, который я взял из Интернета, и мне очень нравится его функциональность, но он не работает на мобильных устройствах. Я попробовал сделать это с помощью функции onclick, но это не совсем удобно для пользователя. Любая помощь приветствуется, спасибо!
Я немного скорректировал некоторые вещи, чтобы их можно было повторно использовать как функцию карты для отображения нескольких.
import { useEffect, useRef } from "react";

const Crabber = ({ urlVoor, urlAchter, description }) => {
const canvasRef = useRef(null);

useEffect(() => {
let canvas = canvasRef.current;
let context = canvas.getContext("2d");
let brushRadius = (canvas.width / 100) * 5;

if (brushRadius < 50) {
brushRadius = 50;
}

let img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = urlVoor;

function detectLeftButton(event) {
if ("buttons" in event) {
return event.buttons === 1;
} else if ("which" in event) {
return event.which === 1;
} else {
return event.button === 1;
}
}

function getBrushPos(xRef, yRef) {
var canvasRect = canvas.getBoundingClientRect();
return {
x: Math.floor(
((xRef - canvasRect.left) / (canvasRect.right - canvasRect.left)) *
canvas.width
),
y: Math.floor(
((yRef - canvasRect.top) / (canvasRect.bottom - canvasRect.top)) *
canvas.height
),
};
}

function drawDot(mouseX, mouseY) {
context.beginPath();
context.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
context.fillStyle = "#000";
context.globalCompositeOperation = "destination-out";
context.fill();
}

canvas.addEventListener(
"mousemove",
function (e) {
var brushPos = getBrushPos(e.clientX, e.clientY);
var leftBut = detectLeftButton(e);
if (leftBut == 1) {
drawDot(brushPos.x, brushPos.y);
}
},
false
);

canvas.addEventListener(
"touchmove",
function (e) {
e.preventDefault();
var touch = e.targetTouches[0];
if (touch) {
var brushPos = getBrushPos(touch.pageX, touch.pageY);
drawDot(brushPos.x, brushPos.y);
}
},
false
);
}, []);

return (


{description}

);
};

export default Crabber;


Подробнее здесь: https://stackoverflow.com/questions/783 ... e-friendly