By default, there is a selection highlighted in the canvas element in iOS devices. We want to get rid of this highlighted part to make the dragging interaction smooth. Add the following CSS rules to the canvas CSS. Please note that we use the webkit vendor prefix here because this rule is specific for webkit at the time of writing this book:

canvas {
  /* for iOS devices */
  -webkit-tap-highlight-color: transparent;
}

Open the untangle.input.js file. We bind the mouse events on the Canvas in the previous step. Now we add the support for touch events. We used MouseEvent.pageX and pageY to calculate the mouse position. With touch devices, there can be multiple touches. We modify our code to add the touch support:

$("#game").bind("mousedown touchstart", function(e) {
  // disable default drag to scroll behavior
  e.preventDefault();

  // touch or mouse position
 ...