Mouse click (or touch) events on canvas causes selection using HTML5, Phonegap and Android
I am working on an HTML5 game using easlejs + phonegap and am running into an issue where the screen flashes everytime you click/touch/mousedown on the canvas.
Below is the very simple code I created to test the issue and see if it was related to easlejs. As you can see from the code it's nothing to do with easlejs and is just an html5/phonegap issue.
You can see I also tried the no select CSS styles to no luck.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#canvas
{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
</style>
</head>
<body>
<canvas id="canvas" width="320" height="480"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", function(e)
{
var ctx = canvas.getContext("2d");
var x = Math.random() * 320;
var y = Math.random() * 480;
var w = Math.random() * 100;
var h = Math.random() * 100;
ctx.fillStyle = "#FF0000";
ctx.fillRect(x,y,w,h);
}, false);
</script>
</body>
</html>
Answer
Edit: Turned out EaselJS still had the bug where the touch showed a selection. To resolved this I added a CSS property to the canvas after reading this article: https://stackoverflow.com/a/7981302/66044
The fix was:
-webkit-tap-highlight-color: transparent;
Was able to resolve this with the help of this article: Prevent page scroll on drag in IOS and Android
Here's the working code. The fix is in handling the touchstart/end events to handle the clicks. No longer experience the orange selection stage.
Tested this in both the 2.2 emulator and my device (Samsung Captivate running Cyanogenmod ICS)
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" width="320" height="480"></canvas>
<script type="text/javascript" src="cordova-1.7.0.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
// FIX: Cancel touch end event and handle click via touchstart
document.addEventListener("touchend", function(e) { e.preventDefault(); }, false);
canvas.addEventListener("touchstart", function(e)
{
var ctx = canvas.getContext("2d");
var x = Math.random() * 320;
var y = Math.random() * 480;
var w = Math.random() * 100;
var h = Math.random() * 100;
ctx.fillStyle = "#FF0000";
ctx.fillRect(x,y,w,h);
// FIX: Cancel the event
e.preventDefault();
}, false);
</script>
</body>
</html>