title: How to draw on a HTML5 canvas with a stylus
body: <p>I used onmousedown, onmousemove and onmouseup events to draw with JavaScript on a HTML5 canvas object. Everything is working.</p>
  
  <p>Now I want to replace the mouse with a sylus (Wacom Intous Pro)
  Therefore I replaced the mouse Events with onpointerdown, onpointerup and onpointermove.</p>
  
  <p>But now, if I touch and move the pen, I do not get any onpointermove Events, instead the whole page is draged. By adding html, body {overflow: hidden} to the HTML construct I could Prevent this behaviour, but still I do not get any onpointermove Events. These I only get when the pen is above the tablet.</p>
  
  <p>Has somebody an idea how to solve it?</p>
  
  <p>Corrently this is the concept I use (but not working):</p>
  
  <pre><code>$(function() {
     var el=document.getElementById("myDraw");
      el.onpointerdown = down_handler;
      el.onpointerup = up_handler;
      el.onpointermove = move_handler;
      ctx = el.getContext("2d");
      ctx.canvas.width  = window.innerWidth*0.75;
      ctx.canvas.height = window.innerHeight*0.75;
  });
  
  
  
  function move_handler(ev) 
  { 
  if (onTrack&gt;0)
  {
      var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
      var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
      ctx.beginPath();
      ctx.lineWidth=10*ev.pressure;
      ctx.moveTo(lastX,lastY);
      ctx.lineTo(xPosition,yPosition);
      ctx.stroke();     
      lastX = xPosition; 
      lastY = yPosition;
  }
  }
  
  function down_handler(ev) 
  {
      var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
      var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
      ctx.beginPath();
      ctx.arc(xPosition, yPosition, 5, 0, 2 * Math.PI);
      ctx.stroke();     
      startX = xPosition;
      startY = yPosition;
      lastX = xPosition;
      lastY = yPosition;
      onTrack=1;
      var el=document.getElementById("myRemoteDraw");
     el.setPointerCapture(ev.pointerId);
      console.log('pointer down '+ev.pointerId);
  }
  
  
  function up_handler(ev) 
  {
      var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
      var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
      ctx.beginPath();
      ctx.rect(xPosition-5, yPosition-5, 10, 10);
      ctx.stroke();     
      onTrack = 0;
      var el=document.getElementById("myRemoteDraw");
      el.releasePointerCapture(ev.pointerId);
      console.log('pointer up '+ev.pointerId);
  }
  </code></pre>