Home/ Questions/Q 8041619
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T04:16:53+00:00

I am working on an HTML5 game using easlejs + phonegap and am running

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0