Disable scroll/swipe action for html canvas drawing on ios

Question

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?

Answer 1

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