Highlight page by moving off canvas?

Question

I have an odd issue and don't really know how to explain it very well. When you click on the canvas and move it outside the canvas bounds then all of a sudden it highlights the entire page and highlights it in blue. Is there a way around this even making the highlight a different colour thats transparet? Or some code that solves this, or even some css?

Here the page to test with, or to understand me! http://www.taffatech.com/Paint.html

and code:

<html>
<head>
<title>Paint</title>

<script type="text/javascript" src="jspaint/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jspaint/jquery-ui-1.10.3.custom.js"></script>

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/dot-luv/jquery-ui.css" />
<script src="jspaint/Paint.js"></script>

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

<style type="text/css">
body {
    background:#303030;
}
#canvas, #canvasCursor {
    cursor: none;
    background: #fff;
    position: absolute;
    left: 50px;
    top: 30px;
    z-index: 1;
}
#canvasCursor {
    z-index: 20;
    background: none;
}

#tabs {

    background: #ffffff;
}
</style>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />


</head>

<body style = "background:#303030;">
<br><br><br>

<center><canvas id="canvasBg" width="1000px" height="600px" style=" position:absolute; left: 50; top: 30; z-index: 1; "></canvas></center>

 <canvas id="canvasCursor" width="1000px" height="600px"></canvas>
    <canvas id="canvas" width="1000px" height="600px"></canvas>


 <div id="tabs" style=" position:absolute; left: 1070; top: 30; z-index: 1; ">
  <ul>
    <li><a href="#tabs-1">Paint</a></li>
    <li><a href="#tabs-2">Shapes</a></li>
    <li><a href="#tabs-3">Save/Submit</a></li>
    <li><a href="#tabs-4">About</a></li>
  </ul>
  <div id="tabs-1">
    <p>Items relating to paint will be stored here</p>
  </div>
  <div id="tabs-2">
    <p>Items relating to shapes will be here</p>
  </div>
  <div id="tabs-3">
    <p>Save your image or submit it to the gallery!</p>
  </div>
  <div id="tabs-4">
    <p>Wayne Daly - 2013</p>
  </div>
</div>

</body>    



</html>

Maybe, you could set `user-select` via CSS when painting or you could try aborting the `selectstart` event (for examples, see [here](http://stackoverflow.com/questions/1224433/how-can-i-disable-highlighting-in-html-or-js)). — ComFreek, Jun 15 '13 at 21:25

dain · Accepted Answer · 2013-06-15T21:53:20.000

All you need is a little bit of user-select: none :)

Edit: You can add the code straight to body and re-enable for #tabs:

body {
    background:#303030;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#tabs {
    user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    background: #ffffff;
}

Highlight page by moving off canvas?

1 Answers1