javascript + html5 canvas: drawing instead of dragging/scrolling on mobile devices?

Asked 2/4, 2012 at 11:12 Answered 17/7, 2019 at 12:43

Solved javascript mobile html5-canvas draw drag

I'm using a html5 canvas + some javascript (onmousedown/move/up) to create simple draw pad on a webpage.

Works OK in Opera, Firefox, Chrome, etc (tried on desktop PCs). But if I visit this page with an iPhone, when trying to draw on the canvas, instead it drags or scrolls the page.

This is fine for other page content, by sliding the page up an down you can navigate through the page in a mobile browser as usual. But is there a way to disable this behavior on the canvas, so that also mobile visitors can actually draw something on it?

For your reference, here's a minimalisic example:

<html><head><script type='text/javascript'>
function init()
{
  var canvas = document.getElementById('MyCanvas');
  var ctx = canvas.getContext('2d');
  var x = null;
  var y;
  canvas.onmousedown = function(e)
  {
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    ctx.beginPath();
    ctx.moveTo(x,y);
  }
  canvas.onmouseup = function(e)
  {
    x = null;
  }  
  canvas.onmousemove = function(e)
  {
    if (x==null) return;
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetLeft;
    ctx.lineTo(x,y);
    ctx.stroke();
  }  
}
</script></head><body onload='init()'>
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'>
</canvas></body></html>

Is there some special style or event I have to add to the canvas, in order to avoid dragging/scrolling the page when swiping in the canvas?

Cis answered 2/4, 2012 at 11:12 Comment(0)

iPad / iPhone doesn't have mouse* events. You need to use touchstart, touchmove and touchend. This events can have multiple touches so you need to get first one like this:

canvas.ontouchstart = function(e) {
  if (e.touches) e = e.touches[0];
  return false;
}

It's important to return false in touch start method because otherwise page scroll is triggered.

Inbred answered 2/4, 2012 at 11:57 Comment(2)

Ah, makes sense. Never noticed these before. Thanks! – Cis 2/4, 2012 at 14:12

On Android this doesn't work, but you can use e.preventDefault(); as per specs w3.org/TR/touch-events/#the-touchstart---------event – Pirri 29/8, 2012 at 10:11

I'm going to add to Grassator's answer by adding a link to this answer that goes more in-depth with the code required to make this solution work: https://mcmap.net/q/906933/-how-can-i-get-this-html5-canvas-paint-application-to-work-for-both-touch-and-mouse-events.

Before I continue, please note that Apple has changed the way iOS handles scrolling on more recent devices. To handle this change, it is necessary to add a few extra functions; thanks to Christopher Vickers for sharing this:

function preventDefault(e) {
    e.preventDefault();
}
function disableScroll() {
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll() {
    document.body.removeEventListener('touchmove', preventDefault);
}

The methods for canvas are all called upon in a drawer fashion like so:

var drawer = {
   isDrawing: false,
   touchstart: function (coors) {
      ctx.beginPath();
      ctx.moveTo(coors.x, coors.y);
      this.isDrawing = true;
      disableScroll(); // add for new iOS support
   },
   touchmove: function (coors) {
      if (this.isDrawing) {
         ctx.lineTo(coors.x, coors.y);
         ctx.stroke();
      }
   },
   touchend: function (coors) {
      if (this.isDrawing) {
         this.touchmove(coors);
         this.isDrawing = false;
      }
      enableScroll(); // add for new iOS support
   }
};

In addition, EventListeners are specifically ordered so that touch inputs are taken first:

var touchAvailable = ('createTouch' in document) || ('onstarttouch' in window);

if (touchAvailable) {
   canvas.addEventListener('touchstart', draw, false);
   canvas.addEventListener('touchmove', draw, false);
   canvas.addEventListener('touchend', draw, false);
} else {
   canvas.addEventListener('mousedown', draw, false);
   canvas.addEventListener('mousemove', draw, false);
   canvas.addEventListener('mouseup', draw, false);
}

Finally, the "elastic" scrolling is prevented by adding one more EventListener near the end of the code.

document.body.addEventListener('touchmove', function (event) {
   event.preventDefault();
}, false);

All of this is placed inside window.addEventListener('load', function () {}).

Inessential answered 17/7, 2019 at 12:43 Comment(0)

Recommended topics

Hot tags