How to prevent text select outside HTML5 canvas on double-click?

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

I have run into a very similar circumstance where I was enabling the ability to drag and drop elements around the page using javascript.

To solve this problem, you have the ability to capture the text selection event and on capture of the event if you return false, the selection will never take place.

For a good example of this being put to use, please reference: http://www.dynamicdrive.com/dynamicindex9/noselect.htm

Alternately if you are familiar with the jQuery framework, a perfectly simplistic and effective plugin is available at: http://chris-barr.com/entry/disable_text_selection_with_jquery/

Bets luck to you!

Answer 2

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.