html5 canvas - mouseclick okay, touch is not getting picked-up

I have an app written in HTML5 and JavaScript that I am trying to get to function for the web AND for smartphones.  It is a simple app ... kind of a proof of concept for the actual app.

<!DOCTYPE html>
<html>
<head>
    <title>Word Ninja</title>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var _globalwordlist;
        var _wordArray;


        $(function () {

            //CONSTANTS
            var MIN_Y = 60;
            var MAX_Y = 450;
            var STARTING_X_MIN = 700;
            var STARTING_X_MAX = 1500;
            var MIN_STEP = 3;
            var MAX_STEP = 4;
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");

            var i = 0;

            var data = "";

            letArray = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
            'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

            function genRandomLetter() {
                return letArray[genRandomNumber(0, 25)];
            }


            function genRandomNumber(start, end) {
                return Math.floor((Math.random() * end) + start);
            }

            var one = {
                visible: true,
                x: genRandomNumber(STARTING_X_MIN, STARTING_X_MAX),
                origX: genRandomNumber(STARTING_X_MIN, STARTING_X_MAX),
                step: genRandomNumber(MIN_STEP, MAX_STEP),
                y: genRandomNumber(MIN_Y, MAX_Y),
                color: '#3B653D',
                useletter: genRandomLetter()
            };

            var two = {
                visible: true,
                x: 1200,
                origX: genRandomNumber(STARTING_X_MIN, STARTING_X_MAX),
                step: genRandomNumber(MIN_STEP, MAX_STEP),
                y: genRandomNumber(MIN_Y, MAX_Y),
                color: '#3B653D',
                useletter: genRandomLetter()
            };

            var three = {
                visible: true,
                x: genRandomNumber(STARTING_X_MIN, STARTING_X_MAX),
                origX: genRandomNumber(STARTING_X_MIN, STARTING_X_MAX),
                step: genRandomNumber(MIN_STEP, MAX_STEP),
                y: genRandomNumber(MIN_Y, MAX_Y),
                color: '#3B653D',
                useletter: genRandomLetter()
            };

            var four = {
                visible: true,
                x: genRandomNumber(STARTING_X_MIN, STARTING_X_MAX),
                origX: genRandomNumber(STARTING_X_MIN, STARTING_X_MAX),
                step: genRandomNumber(MIN_STEP, MAX_STEP),
                y: genRandomNumber(MIN_Y, MAX_Y),
                color: '#3B653D',
                useletter: genRandomLetter()
            };

            _myCircleArray = [one, two, three, four];

            var currentBubble = null, mouse_x, mouse_y;

            window.requestAnimFrame = (function (callback) {
                return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
            })();

            function drawTextBubble(myCircle, context) {

                //the circle
                context.beginPath();
                context.arc(myCircle.x, myCircle.y, 50, 0, Math.PI * 2, false);

                if (context.isPointInPath(mouse_x, mouse_y)) {
                    currentBubble = myCircle;
                    console.log("current bubble got set in drawtextbubble");
                }
                context.fillStyle = currentBubble == myCircle ? '#F00' : '#3B653D';
                context.fill();
                context.strokeStyle = currentBubble == myCircle ? '#F00' : '#FFF';
                context.stroke();

                //the letter inside the circle
                context.beginPath();
                context.fillStyle = '#FFF';
                context.fill();
                context.font = "40px Grunge Handwriting";
                context.fillText(myCircle.useletter, myCircle.x - 10, myCircle.y + 10);
                context.strokeStyle = '#FFF';
                context.stroke();
            }

            function animate(canvas, context, startTime) {
                var time = (new Date()).getTime() - startTime;
                context.clearRect(0, 0, canvas.width, canvas.height); // only clear once
                currentBubble = null;
                for (var a = 0; a < _myCircleArray.length; a++) {
                    var myCircle = _myCircleArray[a];
                    if (myCircle.visible) {
                        myCircle.x = myCircle.x - myCircle.step;

                        if (myCircle.x < -50) {
                            myCircle = randomizeCircle(myCircle);
                        }

                        drawTextBubble(myCircle, context);
                    }
                }
                requestAnimFrame(function () {
                    animate(canvas, context, startTime);
                });
            }

            // wait one second before starting animation
            setTimeout(function () {
                var startTime = (new Date()).getTime();

                canvas.onmousedown = function (e) {
                    //e.preventDefault(e); // Optional
                    mouseDownOrTouchStart(windowToCanvas(e.clientX, e.clientY));
                };

                canvas.onmousemove = function (e) {
                    //e.preventDefault(e); // Optional
                    var tempwtc = windowToCanvas(e.clientX, e.clientY);
                    mouseMoveOrTouchMove(windowToCanvas(e.clientX, e.clientY));
                };

                canvas.ontouchstart = function (e) {
                    e.preventDefault(e); // Optional
                    mouseDownOrTouchStart(windowToCanvas(e.pageX, e.pageY));
                };

                canvas.ontouchmove = function (e) {
                    e.preventDefault(e); // Optional
                    mouseMoveOrTouchMove(windowToCanvas(e.pageX, e.pageX));
                };

                $('#addword').on("click", listhandler);
                $('#togglebg').on("click", bgmusichandler);
                animate(canvas, context, startTime);
            }, 1000);


            function listhandler() {
                $('#wordlist').append($('#word').val() + ' <br />').focus();

                $('#word').val("");
            }


            ///////////////// SOUND //////////////////////
            function bgmusichandler() {

                var running = $('#bgplayer')[0].paused;

                if (!running) {
                    $('#bgplayer')[0].pause();
                }
                else {
                    $('#bgplayer')[0].play();
                }
            }

            function randomizeCircle(tempCircle) {
                tempCircle.x = genRandomNumber(STARTING_X_MIN, STARTING_X_MAX);
                tempCircle.origX = genRandomNumber(STARTING_X_MIN, STARTING_X_MAX);
                tempCircle.step = genRandomNumber(MIN_STEP, MAX_STEP);
                tempCircle.y = genRandomNumber(MIN_Y, MAX_Y);
                tempCircle.useletter = genRandomLetter();
                return tempCircle;
            }



            function windowToCanvas(x, y) {
                var bbox = canvas.getBoundingClientRect();

                var tempx = x - bbox.left * (canvas.width / bbox.width);
                var tempy = y - bbox.top * (canvas.height / bbox.height);

                console.log("wtc x:  " + tempx);
                console.log("wtc y:  " + tempy);

                return { x: tempx,
                    y: tempy
                };
            }


            //            canvas.ontouchstart = function (e) {
            //                e.preventDefault(e); // Optional
            //                mouseDownOrTouchStart(windowToCanvas(e.pageX, e.pageY));
            //            };

            //            canvas.ontouchmove = function (e) {
            //                e.preventDefault(e); // Optional
            //                mouseMoveOrTouchMove(windowToCanvas(e.pageX, e.pageX));
            //            };


            //            canvas.ontouchend = function (e) {
            //                e.preventDefault(e); // Optional
            //                mouseUpOrTouchEnd(windowToCanvas(e.pageX, e.pageX));
            //            };

            // Mouse event handlers........................................

            //                        canvas.onmousedown = function (e) {
            //                            e.preventDefault(e); // Optional
            //                            mouseDownOrTouchStart(windowToCanvas(e.clientX, e.clientY));
            //                        };

            //                        canvas.onmousemove = function (e) {
            //                            e.preventDefault(e); // Optional
            //                            mouseMoveOrTouchMove(windowToCanvas(e.clientX, e.clientY));
            //                        };

            //            canvas.onmouseup = function (e) {
            //                e.preventDefault(e); // Optional
            //                mouseUpOrTouchEnd(windowToCanvas(e.clientX, e.clientY));
            //            };

            // General functions...........................................

            function mouseDownOrTouchStart(e) {


                if (currentBubble != null) {

                    $('#fxplayer')[0].play();

                    $('#word').val($('#word').val() + currentBubble.useletter);
                    currentBubble.visible = false;

                    currentBubble = randomizeCircle(currentBubble);

                    currentBubble.visible = true;
                    $('#status').val("mouse down - bubble good");
                }
                else {
                    console.log("current bubble was null");
                    $('#status').val("mouse down - bubble null");
                }
                // IMPLEMENT
            };

            function mouseMoveOrTouchMove(e) {

                var tempX = e.x;
                var tempY = e.y;

                console.log("offsetX: " + tempX);
                console.log("offsetY: " + tempY);

                mouse_x = tempX;
                mouse_y = tempY;
                // IMPLEMENT
            };

            //            function mouseUpOrTouchEnd(e) {
            //                // IMPLEMENT
            //            }


        });
        
    </script>

    <style>
        #myCanvas
        {
            background-color: rgb(59, 101, 61);
        }
    </style>

</head>
<body>
    <audio id="bgplayer" autoplay style="display: none;">      
<source src="bg.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
    <audio id="fxplayer" autoplay style="display: none;">      
<source src="fx2.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
    <canvas id="myCanvas" width="750" height="600">no canvas support</canvas>
    <br />
    <input style="width: 700px;" id="word">
      
      <br />
    <input style="width: 700px;" id="status">
    
    <br />
    <input type="button" name="submit" value="submit" id="addword" />
    <br />
    <p style="border: 1px solid black; height: 500px; width: 200px;" id="wordlist">
    </p>
    <input type="button" id="togglebg" name="toggle bg music" value="pause bg" />
</body>
</html>

Open in new window



Also go here:

http://utahkidsfoundation.com/popbubbles/CLICKWORKS.htm


I'd be curious to find-out what smart phone users (both android and iPhone) experience when they go to the above URL.  Can you pop the bubbles?  I tried on my Galaxy S5 Active and it won't pick-up touches on the canvas.  Or perhaps better said, it registers all touches as "outside" the bubble, apparently.
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark BullockQA Engineer IIICommented:
I tried it with iPhone 4s. I was able to pop some bubbles by tapping very quickly. Perhaps they move too fast on phones.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom KnowltonWeb developerAuthor Commented:
I tried it with iPhone 4s. I was able to pop some bubbles by tapping very quickly. Perhaps they move too fast on phones.

Great!  I was beginning to think it did not work at all on smartphones!

Maybe it is just the Androids.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.