title: How can I make canvas drawing work on mobile
body: <p>My canvas drawing interface works perfectly on desktop but fails to work on iPhone. </p>
  
  <p>When I try to draw, it just makes a dot where my thumb goes. When I drag my thumb, there is no line and the page continues to scroll...</p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var clearButton = document.getElementById('doodle-bin');
  var canvascontainer = document.getElementById('doodle-canvas-container');
  var canvas = document.getElementById('doodle-canvas');
  var context = canvas.getContext('2d');
  var radius = (document.getElementById('doodle-canvas-container').clientWidth + document.getElementById('doodle-canvas-container').clientHeight) / 150;
  var dragging = false;
  
  function getMousePosition(e) {
      var mouseX = e.offsetX * canvas.width / canvas.clientWidth | 0;
      var mouseY = e.offsetY * canvas.height / canvas.clientHeight | 0;
      return {x: mouseX, y: mouseY};
  }
  
  context.mozImageSmoothingEnabled = false;
  context.imageSmoothingEnabled = false;
  
  canvas.width = 1280;
  canvas.height = 720;
  canvas.style.width = '100%';
  canvas.style.height = '100%';
  
  /* CLEAR CANVAS */
  function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  }
  
  clearButton.addEventListener('click', clearCanvas);
  
  
  var putPoint = function (e) {
      if (dragging) {
          context.lineTo(getMousePosition(e).x, getMousePosition(e).y);
          context.lineWidth = radius * 2;
          context.stroke();
          context.beginPath();
          context.arc(getMousePosition(e).x, getMousePosition(e).y, radius, 0, Math.PI * 2);
          context.fill();
          context.beginPath();
          context.moveTo(getMousePosition(e).x, getMousePosition(e).y);
      }
  };
  
  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);
  document.addEventListener('mouseup', disengage);
  canvas.addEventListener('contextmenu', disengage);
  
  canvas.addEventListener('touchstart', engage, false);
  canvas.addEventListener('touchmove', putPoint, false);
  canvas.addEventListener('touchend', disengage, false);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be greatly appreciated! Thank you</p>