Question

I have this code:

$('#whatever .item').each(function() {
    var canvas = document.getElementById('whatever');
    var ctx = canvas.getContext('2d');
    /* Drawing */


    $(document).mousemove(function(e) {

        mouseY = e.pageY;
        mouseX = e.pageX;       


            if(ctx.isPointInPath(mouseX, mouseY)) {
             alert("HEY!");     

            }

     });
});

I have multiple span tags in the canvas. I’m then using the span tags to create images on a canvas, using ‘each’. So I assumed if I added a mousemove it would add one for each span tag, but it doesn’t. Any ideas?

Answer 1

If I understand you correctly, and I might not, you can’t do things the way you are now.

Right now you have multiple <span> tags inside of a <canvas> tag that represent data that is being drawn to the canvas. You then want something to happen when you hover over that data that is being drawn to the canvas.

This is not how canvas works. None of those <span> tags show up on the page (except as fallback content) and their mousemove/etc events have no bearing on the canvas surface.

When you use your span tags to draw images (or whatever data) to the canvas you have to keep track of where you draw them. Then you need only one mousemove event, on the <canvas> itself, that will loop through the list of locations (or paths or rectangles) that you are trying to detect.

So to attach a mouse event to images drawn on a canvas, you have to keep track of everything drawn yourself. Mouse events on anything except the Canvas itself won’t cut it. All of this you have to write yourself or else use a library. You have indicated that you don’t want to use anymore libraries so here’s a tutorial on learning how to make the canvas interactive (mousedown, mousemove, keeping track of what is drawn, etc).