Mouse click (or touch) events on canvas causes selection using HTML5, Phonegap and Android

StackOverflow https://stackoverflow.com/questions/10866976

  •  12-06-2021
  •  | 
  •  

Question

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.

screenshots showing the orange border when holding mouse down on the canvas (1st image) and then releaseing it (2nd image) 

<!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>
Was it helpful?

Solution

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>

OTHER TIPS

-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */

see: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top