CODEWITHSUNDEEP
htmlioscanvas
Shivas Regol
Shivas Regol

Reputation: 141

Disable scroll/swipe action for html canvas drawing on ios

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?

Upvotes: 14

Views: 11198

Answers (2)

usernumber
usernumber

Reputation: 591

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

Upvotes: 17

Carlos RT
Carlos RT

Reputation: 191

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.

Upvotes: 2

Related Questions