Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to prevent text select outside HTML5 canvas on double-click?
When users double-click on or near an HTML5 canvas element, browsers may inadvertently select surrounding text. This creates a poor user experience, especially in interactive applications. Here's how to prevent this behavior.
The Problem
Double-clicking near a canvas element can trigger text selection in surrounding elements, highlighting unwanted text and disrupting the user interface.
Solution: Disable Text Selection
Set the onselectstart event handler to return false, which prevents the browser from starting text selection on the canvas element.
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
// Prevent text selection on double-click
canvas.onselectstart = function() {
return false;
};
// Add some canvas interaction for demonstration
canvas.addEventListener('dblclick', function() {
console.log('Canvas double-clicked - no text selection!');
});
</script>
Alternative CSS Approach
You can also prevent text selection using CSS properties:
<style>
#myCanvas {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
<script>
// Canvas remains interactive but prevents text selection
var canvas = document.getElementById('myCanvas');
canvas.addEventListener('click', function() {
console.log('Canvas clicked without text selection issues');
});
</script>
Complete Example
Here's a comprehensive example showing both methods working together:
<!DOCTYPE html>
<html>
<head>
<style>
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<p>This text can be selected normally.</p>
<canvas id="gameCanvas" class="no-select" width="400" height="300" style="border: 2px solid blue;"></canvas>
<p>Double-click the canvas above - no text selection will occur.</p>
<script>
var canvas = document.getElementById('gameCanvas');
// JavaScript method
canvas.onselectstart = function() {
return false;
};
// Add canvas functionality
canvas.addEventListener('dblclick', function(e) {
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
console.log('Double-clicked at:', x, y);
});
</script>
</body>
</html>
Browser Compatibility
| Method | Chrome | Firefox | Safari | IE/Edge |
|---|---|---|---|---|
onselectstart |
? | ? | ? | ? |
CSS user-select
|
? | ? | ? (webkit prefix) | ? (ms prefix) |
Conclusion
Use onselectstart = function() { return false; } for JavaScript-based prevention or CSS user-select: none for styling-based solutions. Combining both approaches ensures maximum browser compatibility and prevents unwanted text selection around canvas elements.
376 Views
