HTML How To Prevent Accidental Page Selection When Dragging On A Canvas Element?

- 1 answer

I am trying to build a painting application, but I am running into an issue where if you drag off the canvas while painting, it selects the stuff on the page.

I would like to have the stuff on the page selectable if the user wants, but not if the "drag," started on the canvas. Is there any simple way to do this?

Between Firefox and Chrome, Firefox seems to handle this by default, but Chrome does not.



Simply prevent the default behavior of the mousedown Event when it happens on the canvas:

const canvas = document.getElementById( 'canvas' );
// We do handle this event
canvas.onmousedown = (e) => { e.preventDefault(); };

canvas.getContext('2d').fillText( 'start a drag from here', 20, 20 );
canvas { border: 1px solid; }
<p>don't select me when drag started from canvas</p>
<canvas id="canvas"></canvas>
<p>don't select me when drag started from canvas</p>