Prevent accidental select/drag highlight

Question

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.

This is disruptive to the drawing experience. Is there a way to prevent such highlight from happening?

The event handling and drawing code is based off of this post: http://jsfiddle.net/rnNFB/1/

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 < 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) ;
}) ;

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?

Answer 1

Apply the following CSS class to the elements that should be unselectable. It can also just be applied to body (though, best practise might be to only disable user selection on elements that really need it).

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

JS (only needed for IE < 10):

// the onselectstart way for navigator.appName === "Microsoft Internet Explorer"
document.onselectstart = function() { return false; };

off-topic but it might also be interesing for the app: If you select a big lineWidth in the jsFiddle and move the mouse very slowly, you can see some ugly effects (blocks) in the sketches. Always check that the distance from the onmousemove (while dragging) coordinate to the last coordinate is not too small. For example, only add the coordinates to the sketch if the distance is more than about 1/6 of the linewith.

Answer 2

I wouldn't use document.onselectstart. All you have to do is put this on the canvas in question instead:

canvas.onselectstart = function() { return false; };

Additionally you could capture the mouse down/move/up events that are occuring on your canvas by setting the last argument of addEventListener to true. this will let your drawing continue perfectly even if the mouse leaves the canvas.