How to make clickable points in html5 canvas?

Question

I am playing with a simple tutorial for drawing line in HTML5 canvas. Since, it is based on jQuery, it is easy to add lots of effects to the drawing.

How can I make the point clickable/hoverable to add jquery effects upon click/hover (mouseenter/mouseleave)? The points are drawn by

c.fillStyle = '#333';

for(var i = 0; i < data.values.length; i ++) {
    c.beginPath();
    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
    c.fill();
}

How to add jquery selector? Basically, I want to show the point coordinates upon click or hover.

There are a lot of these frameworks that do these for you, try using one instead. — Joseph, May 19 '12 at 14:29
"Since, it is based on jQuery, it is easy to add lots of effects to the drawing." It is not true, you will not be able to use jquery animation on canvas objects, canvas is kind of low level and you will have to implement all the animation effects yourself ! jQuery works with DOM elements — jazzytomato, May 19 '12 at 16:00

score 17 · Accepted Answer · answered May 19 '12 at 14:19

The problem is that jQuery works with DOM and not drawings on canvas. What you need to do is to store those points somewhere and on hovering over the canvas element, check if the coordinates of the mouse relative to the canvas ( i.e. if you place the mouse over the top-left corner of the canvas, coords are [0,0] ) are within the area of the point/shape. If so, the point is hovered over by the mouse and you can display the effect.

Psuedocode to understand better:

// adding shapes to the canvas
var shapes = [];  // make that rects for simplicity.
For (condition):
    shapes.push ( new Rect(x,y,width,height) );
    canvas.rect( x, y, width, height );

// testing hover.
$("#canvas").mousemove(function(e) {
    var offsetX = e.pageX - $(this).position().left;
    var offsetY = e.pageY - $(this).position().top;

    Foreach shape in shapes:
        if( shape.contains(offsetX, offsetY) )    // a fictious method, implement it yourself...lookup for collision detection; not exactly that but something like that...
            Mouse hovers! do something great.
});

Ok, maybe to find out if a point is contained within a rectangle, you can use something like this:

function contains(rect, x, y) {
    return (x >= rect.x &&
            x <= rect.x + rect.width &&
            y >= rect.y && 
            y <= rect.y + rect.height )
}

score 8 · Answer 2 · answered May 19 '12 at 16:05

8

You could use a framework like EaselJS which abstracts all the hard work of handling mouse events on objects that you add to a canvas.

answered May 19 '12 at 16:05

Neil

7,861
4
53
74

1

Thanks, the effects are really amazing! – Googlebot May 20 '12 at 00:32

How to make clickable points in html5 canvas?

2 Answers2

Linked