title: How to get HTML5 JavaScript canvas to recognize touch/tap from iphone/ipad?
body: <p>I have a very simple HTML5 game that works as expected from a regular browser, but when accessed from a browser on an iPhone or iPad, it does not recognize the click event or the touchstart event.</p>
  
  <p>The original code is from a tutorial located here:
  <a href="http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/" rel="nofollow noreferrer">http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/</a></p>
  
  <p>I have modified it and added a click event which will move the smiley face to wherever you click on the canvas. This click event works fine from Mac and Windows browsers with a mouse:
  <a href="http://iwebss.com/test" rel="nofollow noreferrer">http://iwebss.com/test</a></p>
  
  <p>But if you access it with an iPhone or iPad, the click event does not work. I also tried adding an additional listener for touchstart, which does not work either.</p>
  
  <p>These are the new listeners I added to the code:</p>
  
  <pre><code>    addEventListener("click", mouseClickEvent, false);
      function mouseClickEvent(e) {
          alert("click event");
              mouseClick = true;
          if (e.offsetX) {
                mouseX = e.offsetX;
                mouseY = e.offsetY;
              }  else if(e.layerX) {
                mouseX = e.layerX;
                mouseY = e.layerY;
              }
      }
  
      addEventListener("touchstart", testEvent, false);
      function testEvent(e) {
          alert("touchstart event");
      }
  </code></pre>
  
  <p>Any ideas on what I am doing wrong, or how to read iPhone and iPad touch events?</p>
  
  <p>EDIT: I also tried the mousedown event which also does not work.</p>
  
  <p>RESOLVED: I figured it out... see my answer below.</p>