Tengo esto:
<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>y ahora mismo detecta que se presiona el mouse hacia abajo, pero cuando lo uso en el móvil, no funciona porque no detecta mi dedo en el lienzo. He intentado encontrar algunas soluciones en línea pero nada para este caso. ¿Cómo puedo arreglar esto?
Debe activar los eventos del mouse utilizando las API de eventos táctiles. Para obtener más información, use este enlace , explica todas las opciones disponibles con ejemplos, todo basado en la API de lienzo.
Así que aquí hay un fragmento de código del sitio web de mi cartera en abjt.dev . También puede verificar el código en Github.
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 })