title: Mouse click (or touch) events on canvas causes selection using HTML5, Phonegap and Android
body: <p>I am working on an HTML5 game using easlejs + phonegap and am running into an issue where the screen flashes everytime you click/touch/mousedown on the canvas.</p>
  
  <p>Below is the very simple code I created to test the issue and see if it was related to easlejs.   As you can see from the code it's nothing to do with easlejs and is just an html5/phonegap issue.</p>
  
  <p>You can see I also tried the no select CSS styles to no luck.</p>
  
  <p><img src="https://i.stack.imgur.com/0eHnJ.png" alt="screenshots showing the orange border when holding mouse down on the canvas (1st image) and then releaseing it (2nd image) "></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          #canvas
          {
              user-select: none;
              -webkit-user-select: none;
              -moz-user-select: none;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas  id="canvas" width="320" height="480"&gt;&lt;/canvas&gt;
      &lt;script type="text/javascript"&gt;
          var canvas = document.getElementById("canvas");
  
          canvas.addEventListener("mousedown", function(e)
          {
              var ctx = canvas.getContext("2d");
              var x = Math.random() * 320;
              var y = Math.random() * 480;
              var w = Math.random() * 100;
              var h = Math.random() * 100;
  
              ctx.fillStyle = "#FF0000";
  
              ctx.fillRect(x,y,w,h);
          }, false);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>