How to click background canvas and trigger a function

Question

I'm new to canvas, can you any answer for my problem

I'm using two canvas layer, top layer canvas (Blue rectangle) and bottom layer canvas (greyBall). greyBall move randomly and blueRectangle static in some position.

I need to achieve,

user click the greyBall when it is behind blueRectangle and i need to stop greyball movement.

find code here

  <section>
     <div id="kanvas" style="position:relative; width:400px; height:300px">
        <canvas id="layer1"
           style="z-index: 1;position:absolute;left:0px;top:0px;" height="300px" width="400">
        </canvas>
        <canvas width="100" height="100" style="z-index: 2;pointer-events: none;position:absolute;left:50%;top:50%;" id="layer2">
        </canvas>
     </div>
     <script type="text/javascript">
        var layer1;
        var layer2;
        var ctx1;
        var ctx2;
        var x = 400;
        var y = 300;
        var dx = 2;
        var dy = 4;
        var WIDTH = 400;
        var HEIGHT = 300;

        function init() {
            //city.src ="city.png";
            layer1 = document.getElementById("layer1");
            ctx1 = layer1.getContext("2d");
            layer2 = document.getElementById("layer2");
            ctx2 = layer2.getContext("2d");
            //drawAll();
            setInterval(drawAll, 0.5);
        }

        function drawAll() {
            drawBall();
            drawRectangle();
        }

        function drawBall() {
            ctx1.clearRect(0, 0, WIDTH, HEIGHT);
            ctx1.fillStyle = "#444444";
            ctx1.beginPath();
            ctx1.arc(x, y, 50, 0, Math.PI*2, true);
            //ctx1.arc(x, y, 100, 0, Math.PI*2, true);
            ctx1.closePath();
            ctx1.fill();

            if (x + dx > WIDTH || x + dx < 0)
            dx = -dx;
            if (y + dy > HEIGHT || y + dy < 0)
            dy = -dy;

            x += dx;
            y += dy;
        }
        function drawRectangle() {
            ctx2.clearRect(0, 0, WIDTH, HEIGHT);
            ctx2.fillStyle = "blue";
            ctx2.save();
            ctx2.translate(20,20);
            //ctx2.rotate(x/20);
            ctx2.fillRect(-15, -15, 100, 100);
            ctx2.restore();
        }
        init();
     </script>
  </section>

https://jsfiddle.net/om0n8qka/1/

my worked code : https://jsfiddle.net/kqsLwb80/

I have found answer for my solution, updated code is here https://jsfiddle.net/lannymcnie/kqsLwb80/10/ Now how could clear the greyball path. just need to display circle only not his path

you were able to do a complex canvas animation but not to write a click event manager? — A. Rama, Apr 17 '15 at 06:33
i have updated my code using createjs. Now i can find the click event on the circle. but now the movement of circle is stop even i click on the path of the circle. check out my code : https://jsfiddle.net/kqsLwb80/7/ — K6t, Apr 20 '15 at 12:56

score 0 · Answer 1 · edited May 23 '17 at 11:51

Mostly, this question is similar to this other: How do I add a simple onClick event handler to a canvas element?

That is, you're asking how to add onclick to a canvas element. The simple answer is: you cannot.

The complex answer is: you add the event listener to the enclosing canvas and then do some math to see if your click is intersecting the relevant element or not.

I added jQuery for easy click management :

$("#layer1").click(function(e){
        if(distance(x,y,e.offsetX, e.offsetY) < 2*radius) {
                if(interval) {  
                        clearInterval(interval);
                        interval = null;
                }
                else {
                        interval = setInterval(drawAll, 0.5);
                }
        }
});

and distance is the obvious 2D distance formula:

function distance(x1,y1,x2,y2) {
    return Math.sqrt(Math.pow(x2-x1, 2) + Math.pow(y2-y1, 2));
}

This is your jsfiddle modified: https://jsfiddle.net/nfyr05h1/3/

Note that clicking on the circle while it's moving is not easy, since the click event management intercept the up-button event and while the routine is fast, it still takes a few milliseconds to compute while the circle is still moving.

This means that the actual accepted target area is slightly in front of the circle at the time you click. To overcome this, I accept clicks in a larger circle (2*radius).

Now, if you want to add code to check if the clicked circle is behind the blue rectangle, that you'll have to do yourself. This however is how it must be done.

How to click background canvas and trigger a function

1 Answers1