Q:

Click and drag from inside canvas element highlights text outside it in some browsers

I have a canvas in a page with some text after it:
<canvas id="myCanvas" width="800" height="160"></canvas>
<p>Some text after the canvas</p>

I use JavaScript to draw points/lines. This one's very simple.
var canvas  = document.getElementById("myCanvas");
var ctx     = canvas.getContext("2d");
var drawing = false;

canvas.onmousedown = function(e){
    if( !drawing )
    {
        drawing = true;
        ctx.beginPath();
    }
}

canvas.onmousemove = function(e){
    var x = e.clientX - canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;

    if( drawing )
    {
        ctx.lineTo(x,y);
        ctx.stroke();
    }
}

canvas.onmouseup = function(e){
    drawing = false;
}

canvas.onmouseout = function(e){
    drawing = false;
}

If I click on the canvas and hold, I can move my mouse around in the canvas and draw lines. Great! However, if I keep holding and move my mouse down off the canvas and past the <p> text, I will end up highlighting that text. Not so great! I've noticed this doesn't happen in some browsers. Here is a list of what I've tested on:

Firefox 37: no highlighting issue exists
IE 9: highlighting issue exists
IE 11: highlighting issue exists
Chrome 41: highlighting issue exists

My question: What can be done to prevent this highlighting issue from occurring?

A:

You can dissable text selection onDrag:
Demo: http://jsfiddle.net/zb2soupb/
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

canvas.onmousemove = function(e){

    // Dissable text selection
    document.body.classList.add('unselectable')

    var x = e.clientX - canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;

    if( drawing )
    {
        ctx.lineTo(x,y);
        ctx.stroke();
    }
}

canvas.onmouseup = function(e){
    drawing = false;
    document.body.classList.remove('unselectable')
}

