In my phonegap app, I have a signature box using canvas at the end of long page of text that vertically scrolls no matter the device iPhone or iPad, or orientation. The page is simply taller than the viewport will ever be.
The issue is that when the user tries to sign using their finger on the canvas, rather than drawing on it, the entire page scrolls when they move up and down because of touch scrolling.
How can I avoid this? Here is what I have done so far. (Note the canvas width is dynamically assigned based on the viewport)
HTML:
<div id="canvas-container">
<canvas id="paintCanvas" width="600" height="158"></canvas>
</div>
Javascript/JQuery:
var mycanvas = $("#paintCanvas");
mycanvas.addEventListener("touchstart", function(event) {event.preventDefault()})
mycanvas.addEventListener("touchmove", function(event) {event.preventDefault()})
mycanvas.addEventListener("touchend", function(event) {event.preventDefault()})
mycanvas.addEventListener("touchcancel", function(event) {event.preventDefault()})
I'm getting similar behavior on iOS and Android. Is there another event that I need to catch like swipeUp? I thought touchstart and touchmove would be all I needed. Any suggestions?
Answering my own question - I gave up on this approach, and instead placed the canvas based signature box into a modal dialog that is static (does not scroll) triggered by a "add signature" button. It is a hack, but it presents the end user with a signature box that will not move as they try to sign with their finger.