title: javascript + html5 canvas: drawing instead of dragging/scrolling on mobile devices?
body: <p>I'm using a html5 canvas + some javascript (onmousedown/move/up) to create simple draw pad on a webpage. </p>
  
  <p>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. </p>
  
  <p>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?</p>
  
  <p>For your reference, here's a minimalisic example:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;script type='text/javascript'&gt;
  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();
    }  
  }
  &lt;/script&gt;&lt;/head&gt;&lt;body onload='init()'&gt;
  &lt;canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'&gt;
  &lt;/canvas&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>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?</p>