How to disable select for html5 canvas element

Question

I listen for click events inside an html5 canvas and it works just fine. However, when I click anywhere on the image the browser highlights it as if it were selected (similar to how an image might look highlighted if clicked on a page). I was curious if anyone knew how to disable selecting of html elements such as canvas. I don't want the canvas to appear outlined when someone clicks it.

Answer 1

Going on bebraw, go wild with CSS styles and add this in the head:

<style type="text/css">
    canvas {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
    }   
</style>

Answer 2

You could try applying a few CSS rules along these:

user-select: none;
-webkit-user-select: none;
-moz-user-select: none;

As Michael mentioned jQuery's disableTextSelect is worth checking out. Even if you don't end up using it, studying the source might give some insight.

Answer 3

Only the last of those css rules seemed to do it. The other rules together didn't work (on Safari iOS5) until I added the last one.

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 

Answer 4

Somewhat related: if the problem is that the cursor becomes the selection icon (eg. when dragging on the canvas), you can disable that by either this CSS on the canvas:

cursor: default;

or preventing the event's default behavior in the mousedown handler:

event.preventDefault();

Answer 5

I'd use jQuery.$('.noSelect').disableTextSelect();