title: Prevent accidental select/drag highlight
body: <p>I have a drawing application using html5 canvas. When the user is drawing and pen slips out of the canvas area, chrome highlights html elements on the page in light blue or yellow.</p>
  
  <p><img src="https://i.stack.imgur.com/m8qJP.png" alt="screen shot"></p>
  
  <p>This is disruptive to the drawing experience.  Is there a way to prevent such highlight from happening?</p>
  
  <p>The event handling and drawing code is based off of this post: <a href="http://jsfiddle.net/rnNFB/1/" rel="noreferrer">http://jsfiddle.net/rnNFB/1/</a></p>
  
  <pre><code>var x ;
  var y ;
  
  var lower = $('#lower').get(0).getContext('2d') ;
  var upper = $('#upper').get(0).getContext('2d') ;
  
  var dragging = false ;
  
  function drawStroke(ctx){
      var i ;
      ctx.strokeStyle='rgba(0,0,0,0.5)' ;
      ctx.lineWidth=10 ;
      ctx.beginPath() ;
      ctx.moveTo(x[0],y[0]) ;
      for (i=1; i &lt; x.length; i++){
          ctx.lineTo(x[i],y[i]) ;
      }
      ctx.stroke() ;
  }
  
  $('#upper').mousedown(function(e){
      x=[e.layerX];
      y=[e.layerY];
      dragging=true}) ;
  
  $('#upper').mousemove(function(e){
      if (dragging){
          x.push(e.layerX);
          y.push(e.layerY);
          upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ;
          drawStroke(upper) ;
      }}) ;
  
  $('#upper').mouseup(function(e){
      dragging = false ;
      upper.clearRect(0,0,upper.canvas.width,upper.canvas.height) ;
      drawStroke(lower) ;
  }) ;
  </code></pre>
  
  <p>If you add some h1 tags above the canvas tags then draw on the canvas, dragging outside the bounding box, you will see a blue highlight.  Is there a way to prevent this behavior?</p>