11

I have a html canvas with mouse and touch events to draw on it.

I use css touch-action: none style on the canvas to disable scrolling on the device while drawing.

However it only works for non IOS devices. On any browser on an IOS device it still does a scroll/swipe action and makes it tough to draw correctly.

It almost seems to be an IOS feature. A web page that easily fits on the screen can still be scroll/swiped.

Any way to fix the issue?

Shivas Regol
  • 111
  • 1
  • 4
  • Welcome to StackOverflow. Please take the [tour](http://stackoverflow.com/tour) have a look around, and read through the [HELP center](http://stackoverflow.com/help), then read [How to Ask Question](http://stackoverflow.com/help/how-to-ask), [What types of questions should I avoid asking?](http://stackoverflow.com/help/dont-ask) and provide a [MCVE : Minimal, Complete, and Verifiable Example](http://stackoverflow.com/help/mcve). If people around can easily read and understand what you mean, or what the problem is, they'll be more likely willing to help :) – Dwhitz Mar 01 '18 at 10:23

2 Answers2

13

After a year of having this problem myself, I finally managed to fix it.

Solution: Handle the touchstart, touchmove, touchend, touchcancel events, and call event.preventDefault(), ON THE CANVAS ELEMENT. If it bubbles beyond the canvas element, it will scroll.

Example:

var canvas_dom = // make this your canvas DOM element
canvas_dom.addEventListener("touchstart",  function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchmove",   function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchend",    function(event) {event.preventDefault()})
canvas_dom.addEventListener("touchcancel", function(event) {event.preventDefault()})
usernumber
  • 541
  • 5
  • 15
2

Can you verify that this page works well for you? http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html

This used to work well on my iOS, until update 11.3. Post update, the canvas is always scrolling when dragging. In other OSs the solution is touch-action:none, or in Javascript world: event.preventDefault(). However, as you can see in the code behind the page above, the Javascript option does not work.

P.S. I cannot stress enough that this used to work pre iOS 11.3 update.

Carlos RT
  • 171
  • 1
  • 10
  • I'm trying to do the same thing as OP. The site you linked doesn't work, however [https://drawisland.com/iphone](https://drawisland.com/iphone) and [https://quickdraw.withgoogle.com/](https://quickdraw.withgoogle.com/) work fine. I'm guessing from looking at them that it requires some kind of nesting, with the canvas and div having weird position: values. – usernumber Jul 01 '18 at 21:19
  • 1
    FYI, preventDefault will do half of the trick. For iOS 11.3+: See also https://stackoverflow.com/questions/49854201/html5-issue-canvas-scrolling-when-interacting-dragging-on-ios-11-3/51652248#51652248 – Carlos RT Aug 02 '18 at 11:16
  • The safari release notes seem to clear this mystery up. Listeners on root are passive by default, so both your solution (make them not passive) and my solution (don't put them on root) fix the problem. – usernumber Aug 02 '18 at 21:12