title: How to enable touch events on a html canvas for mobile browsers
body: <p>Problem: If a mobile browser zooms in on something, say a login input, then the input fades away to a html canvas, the user can't use their taps or drags to have any effect on the html canvas too zoom out or move around. This means if the screen is zoomed in, there's no way for the user to zoom out unless there is a different html object sitting over the canvas for the user to tap. </p>
  
  <p><strong>Desired solution:</strong> javascript code that allows the canvas to function like other divs when tapped on or dragged (for zooming in/out and navigating while zoomed)</p>
  
  <p>Acceptable solution: A javascript function to have the browser zoom out to the documents original size. - OR - A way to use CSS to make sure the browser doesn't zoom in on the canvas.</p>
  
  <p>Not acceptable: disable zooming in or out on the entire page.</p>
  
  <p>Using chrome and iphone safari.</p>
  
  <p>Update</p>
  
  <pre><code>if ( viewport ) {
      viewport.content = "initial-scale=0.1";
      viewport.content = "width="+screenW;
  }
  </code></pre>
  
  <p>After selecting the viewport, this code manages to zoom out google chrome's rendition of an mobile phone, but this does not work on my iphone 7. </p>