detect finger touch javascript canvas

Question

I have this:

<canvas id="canvas" width="400" height="400" style="border:2px solid; background-color: #2c2c2c;"></canvas>
              <input type="button" value="Clear" class="canvas-clear" />
              <button onclick="toDataUrlForCanvas()">Submit</button>
          <script>
            $(document).ready(function() {
            var flag, dot_flag = false,
              prevX, prevY, currX, currY = 0,
              color = 'black', thickness = 2;
            var $canvas = $('#canvas');
            var ctx = $canvas[0].getContext('2d');
          
            $canvas.on('mousemove mousedown mouseup mouseout', function(e) {
              prevX = currX;
              prevY = currY;
              currX = e.clientX - $canvas.offset().left;
              currY = e.clientY - $canvas.offset().top;
              if (e.type == 'mousedown') {
                flag = true;
              }
              if (e.type == 'mouseup' || e.type == 'mouseout') {
                flag = false;
              }
              if (e.type == 'mousemove') {
                if (flag) {
                  ctx.beginPath();
                  ctx.moveTo(prevX, prevY);
                  ctx.lineTo(currX, currY);
                  ctx.strokeStyle = color;
                  ctx.lineWidth = thickness;
                  ctx.stroke();
                  ctx.closePath();
                }
              }
            });
          
            $('.canvas-clear').on('click', function(e) {
              c_width = $canvas.width();
              c_height = $canvas.height();
              ctx.clearRect(0, 0, c_width, c_height);
              $('#canvasimg').hide();
            });
          });
          
          function toDataUrlForCanvas() {
            var imgData = document.getElementById('canvas')
            imgData = imgData.toDataURL(); 
            console.log(imgData)
          }
          </script>

and right now it detects the mouse being pushed down, but when I use it on mobile, it doesn't work because it doesn't detect my finger on the canvas. I have tried to find some solutions online but nothing for this case. How can i fix this?

Answer 1

You have to trigger the mouse events using the touch event APIs. For more information, use this link , it explains all the available options with examples all based on canvas API.

So here is a code snippet from my portfolio website on abjt.dev . You can check the code on Github as well.

let x = 0;
let y = 0;
document.querySelector('html').addEventListener('mousemove', (e) => {
    // do something
});

document.addEventListener('touchstart', (e) => {
    let touch = e.touches[0];
    x = touch.clientX;
    y = touch.clientY;
    // do something
})
document.addEventListener('touchmove', (e) => {
    let touch = e.touches[0];
    const mouseEvent = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    document.querySelector('html').dispatchEvent(mouseEvent);
    // do something
})