Alert if clicked image in canvas

Question

so I have animated image in canvas. It goes from left to right. And I want to have:

alert("Wokrs!");

If I click on image. Anybody have idea how to do it? Here is my code:

    <head>
        <script src="events.js">
        </script>
        <script src="animation.js">
        </script>
<script>
window.onload = function(){
    var events = new Events("myCanvas");
    var canvas = document.getElementById("myCanvas");
    var c = canvas.getContext("2d");
    var anim = new Animation("myCanvas");


    var image = new Image();

    anim.setDrawStage(function()
    {
        c.clearRect(0, 0, 3000, 3000);
        c.drawImage(image, anim.getFrame() - 100, Math.cos(anim.getFrame() / 25) * 60);


        if(events.getMousePos() != null) 
        {

        //Here I want to do alert("Works!"); if mouse clicked image.

        }

    });

    image.onload = function()
    {
        anim.start();
    };
    image.src = "mojaRyba.png";

    events.listen();
};

</script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>

@edit

I added more of my code.

Maybe [this SO answer](http://stackoverflow.com/a/24384882/1449624) helps? Where rectangle is your image. — A1rPun, Mar 18 '15 at 15:46

score 0 · Answer 1 · answered Mar 18 '15 at 17:32

0

You need to add a click event handler, here is an example:

canvas.addEventListener("click", function(
    alert("Works!");
)

answered Mar 18 '15 at 17:32

marcusshep

1,916
2
18
31

Alert if clicked image in canvas

1 Answers1