Рисование на холсте - не по пути мыши

Question

У меня проблема с моим кодом, и я надеюсь, что кто-то сможет мне помочь. Я делаю приложение, которое позволяет рисовать на сенсорных экранах или с помощью мыши для нескольких человек одновременно.

Проблема в том, что мой код периодически проверяет позиции курсора (это выглядит так, но янет никакой периодической проверки в коде), потому что при быстром рисовании я могу видеть что-то подобное (линии слишком прямые, и они не следуют за курсором):! (https://i.imgur.com/cdrA82Z.png)

Вот код: https://jsfiddle.net/Kshishiu/reyagxtz/4/

function getTouchPos (canvasDom, touchEvent) {
    var rect = canvasDom.getBoundingClientRect ();
    return {
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top,
    };
}

Я ценю любой вклад от Вас:)

Спасибо! <3 </p>

Answer 1

Ну, вы можете попробовать это с помощью этого метода:

var holding = false;
document.body.addEventListener("mousedown", ()=>{
   holding = true;
}
document.body.addEventListener("touchstart", ()=>{
   holding = true;
}
document.body.addEventListener("mouseup", ()=>{
   holding = false;
}
document.body.addEventListener("touchend", ()=>{
   holding = false;
}

Затем вы можете отслеживать ваши движения холста:

document.getElementById("yourCanvasId").addEventListener("mousemove", ()=>{
   if(holding == true){
      x = event.clientX - rect.left;
      y = event.clientY - rect.top;
   }
}

document.getElementById("yourCanvasId").addEventListener("touchmove", ()=>{
   if(holding == true){
      x = event.clientX - rect.left;
      y = event.clientY - rect.top;
   }
}

С помощью socket.io вы можете отправлять эти движущиеся события на вашсервер и ваш сервер отправляют эту информацию всем вашим клиентам, а на стороне клиента вы можете написать небольшой скрипт, в котором вы можете прослушивать эти события и рисовать что-то в зависимости от этих событий.