Холст тактильный JS

Question

У меня есть проект, где мне нужно создать сайт бронирования велосипедов. Мне нужно создать холст, чтобы люди могли что-то подписывать.Я создаю свой холст, и он хорошо работает с мышью, но мне нужно знать, как это сделать на мобильном устройстве.Я попробовал несколько вещей (с touchmove / touchstart), но я не могу заставить его работать.Это мой объектный холст в ES6 (я не использую jQuery).Мне не разрешено использовать какие-либо библиотеки, и я хочу использовать только JS (я изучу jQuery в какой-то момент).

class Canvas {

    constructor(canvasId, clearBtnId) {
        this.canvas = document.getElementById(canvasId);
        this.idBtnClear = clearBtnId;
        this.ctx = this.canvas.getContext("2d");
        this.painting = false;
        this.isEmpty = true;

        this.canvas.addEventListener("mousedown", this.mouseDown.bind(this));
        this.canvas.addEventListener("mouseup", this.mouseUp.bind(this));
        this.canvas.addEventListener("mousemove", this.draw.bind(this));
        this.canvas.addEventListener("mouseout", this.mouseUp.bind(this));

        document.getElementById(this.idBtnClear).addEventListener("click", this.clearCanvas.bind(this));

    }

    mouseDown(e) {
        this.painting = true;
    }

    mouseUp() {
        this.painting = false;
        this.ctx.beginPath();
    }

    draw(e) {
        if (!this.painting) return;
        this.ctx.lineWidth = 5;
        this.ctx.lineCap = "round";
        this.ctx.lineJoin = "round";

        let topPos = e.pageY - this.canvas.offsetTop;
        let leftPos = e.pageX - this.canvas.offsetLeft;

        this.ctx.lineTo(leftPos, topPos);
        this.ctx.stroke();
        this.ctx.beginPath();
        this.ctx.moveTo(leftPos, topPos);

        this.isEmpty = false;
    }

    clearCanvas() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.isEmpty = true;
    }

}

Answer 1

Вы можете использовать события

• pointerdown
• pointerup

для сенсорных устройств.