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?
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
})