Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable select for html5 canvas element

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.

like image 304
ldeluca Avatar asked Apr 26 '11 21:04

ldeluca


1 Answers

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>
like image 113
mgold Avatar answered Sep 22 '22 06:09

mgold