PHP Signature Pad & Upload on server

[@cdms-ltd]

Hi thanks for the tutorial it was exactly what I needed however I have run into an issue, when I try using my finger on a touch screen laptop its scrolls the screen and doesn't allow me to drawn within the signature box, it does allow me to draw a dot but then moves the screen, how can I overcome this issue building on what we have learnt from this tutorial, appreciate your response.

[@aymonyz9469]

Hello, did you find a solution for this problem? It also does not work with a device that works with touch. If you find a solution, please provide me with information regarding this problem. I also suffer from the same problem. Thank you in advance.

[@michaelsoule9674]

@@aymonyz9469 did you get this working?, having same problem...

[@gilbesm1]

May have to disable page scrolling and set your body overflow to hidden. It will be harder to place your document, but I don't know of any other way to keep it from moving.

[@vrushabhpatil2867]

Thanxx buddy!!! it help me to learn new i would definitely use it in my project

[@piyushsanepara8924]

How it works in Mobile google chrome browser??
Its working through the finger??

[@riccardoairone892]

this work perfectly on desktop but dont work in mobile ! can you help me ? @Rathorji

[@kuldipvadalia4894]

Not working for mobile browser

[@karyautama6394]

Thank, but Not working for mobile browser

[@angelfrancia]

does anyone have the solution for the mobile browser for this code?

[@DionSiluch]

This was very helpful thank you!

[@VikShar]

This code is not working on mobile device, if I try to draw anything in the canvas, it gets scrolled

[@outdoorsrocks7685]

Add the following to the very bottom of the jquery.signature.js file.
// Add touch event support for mobile
canvas.addEventListener("touchstart", function(e) {
}, false);
canvas.addEventListener("touchmove", function(e) {
var touch = e.touches[0];
var me = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(me);
}, false);
canvas.addEventListener("touchstart", function(e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var me = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(me);
}, false);
canvas.addEventListener("touchend", function(e) {
var me = new MouseEvent("mouseup", {});
canvas.dispatchEvent(me);
}, false);
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
}
}
function getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
}
}
function renderCanvas() {
if (drawing) {
ctx.moveTo(lastPos.x, lastPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.stroke();
lastPos = mousePos;
}
}
// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function(e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function(e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function(e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
(function drawLoop() {
requestAnimFrame(drawLoop);
renderCanvas();
})();
function clearCanvas() {
canvas.width = canvas.width;
}

[@nilfebalingit5605]

thank you very much

[@DionSiluch]

Even got the mobile version working. Works great on phone and tablet

[@nathananih1989]

Are yu really sure

[@augustoafsd]

How??

[@arturohdezb]

@@augustoafsd yo encontré la solución con jquery ui touch-punch

[@muhammadtouqeer8738]

please help how can we fixed mobile devices issue

[@leighadams7060]

Cannot see the top of your upload.php

[@aBooal9DH]

thx

[@aubiergeeguin4819]

it does not work on phone

[@almosawi32]

it's not working!

[@lucifer-5ybtn]

you yourself don’t know how the code will work. You are not even able to explain and you’re just reading the code.