title: How is it possible to make this app working with mobile browsers?
body: <p>I am working on an app for drawing using HTML 5 Canvas the problem that it's working well on computer browser like this picture
  <a href="http://s28.postimg.org/z0ytnva98/problem.jpg" rel="nofollow">http://s28.postimg.org/z0ytnva98/problem.jpg</a></p>
  
  <p>I want to make it working on mobile browser (never mind working on both, mobile browser is what I want).
  the problem in my code concerning the Java Script events.
  I change it to</p>
  
  <pre><code>canvas.addEventListener('touchstart' , engage);
  canvas.addEventListener('touchmove', putpoint);
  canvas.addEventListener('touchend' , disengage);
  </code></pre>
  
  <p>but didn't work i also tried</p>
  
  <pre><code>canvas.addEventListener('touchstart' , engage);
  canvas.addEventListener('touchmove', putpoint);
  canvas.addEventListener('touchleave' , disengage);
  </code></pre>
  
  <p>also didn't work.
  when I leave it to as it was like this </p>
  
  <pre><code>canvas.addEventListener('mousedown' , engage);
  canvas.addEventListener('mousemove', putpoint);
  canvas.addEventListener('mouseup' , disengage);
  </code></pre>
  
  <p>it make just a point like this picture
  <a href="http://s14.postimg.org/tadk87jpt/Screenshot_2015_02_15_20_16_32.png" rel="nofollow">http://s14.postimg.org/tadk87jpt/Screenshot_2015_02_15_20_16_32.png</a></p>
  
  <p>here is my code </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Drawing app&lt;/title&gt;
  &lt;body style="overflow: hidden"&gt;
  &lt;canvas id="canvas" style="width:100% ; height:100%"&gt;
      Your browser does not support canvas element.
  &lt;/canvas&gt;
  &lt;script&gt;
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          radius = 20,
          dragging = false;
  
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
  
      context.lineWidth = radius*2;
      var putpoint = function(e){
          if(dragging){
              context.lineTo(e.clientX, e.clientY);
              context.stroke();
              context.beginPath();
              context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
              context.fill();
              context.beginPath();
              context.moveTo(e.clientX, e.clientY);
          }
      };
  
      var engage = function(e){
          dragging = true;
          putpoint(e);
          };
  
      var disengage = function(){
          dragging = false;
          context.beginPath();
          };
  
      canvas.addEventListener('mousedown' , engage);
      canvas.addEventListener('mousemove', putpoint);
      canvas.addEventListener('mouseup' , disengage);
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>