Question

(In every browser I’ve tried) double-clicking on an HTML5 canvas selects any text immediately following the canvas element. I’d prefer to keep the clicks confined to the canvas.

(N.b.: I don’t want to disable text selection entirely (e.g. like this): if you double-click the text it should be selected. I just don’t want the clicks to “leak” from the canvas.)

Is this possible?

Here’s a simple page which demonstrates the issue.

Answer 1

Firstly let me note that your canvas is not filling the width of the page, it is only 100 pixels wide. Width and height canvas attributes always parse to pixels, so writing width=”100%” just means 100 pixels as far as the Canvas tag is concerned.

To answer your question, write in javasript:

//give your canvas an id, I used 'can'    
var canvas = document.getElementById('can');
canvas.onselectstart = function () { return false; }

The double-click text problem will no longer occur.