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

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>

maybe: document.addEventListener("selectstart", function(){ return false; }); and the same for the dragstart event... — Zevan, Jun 03 '12 at 02:05
Unfortunately that didn't help. Even tried adding the event on the canvas. — Gautam, Jun 03 '12 at 02:59

score 18 · Accepted Answer · edited May 23 '17 at 12:01

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>

Thanks! I only needed the CSS portion, but I cannot believe how hard it was to find anyone else who was having the same issue with the flickering every time I touched an active button on my mobile site. It was very distracting and not visually helpful to my visitors since I provide them with enough immediate, visual feedback without the "flicker"... — exoboy, Aug 14 '12 at 18:37

score 3 · Answer 2 · answered Feb 09 '13 at 01:52

3

-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

answered Feb 09 '13 at 01:52

Henry

31
1

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

2 Answers2