Vfrdtyky

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?

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')

}

I think the best answer is to call "e.preventDefault()" inside all your canvas mouse event handlers, e.g.:

canvas.onmousedown = function(e){

    e.preventDefault();    // <-- this

    if( !drawing )

    {

        drawing = true;

        ctx.beginPath();

    }

}