Checking mouse event on line in Context2d

Question

If I have line like this (a xy plot in the future)

`Canvas {
    id:canvas
    onPaint:{
       var ctx = canvas.getContext('2d');
       ctx.moveTo(0,0);
       ctx.lineTo(50,20);
       ctx.lineTo(50,70);
       // etc...
    }
 }`

so, is there a good way to check mouse press event on this line? i.e. If I have a plot and want to show context menu on right click on graph line

score 1 · Accepted Answer · edited May 23 '17 at 11:48

Unfortunately, AFAIK, you should keep track of what you draw. Canvas doesn't store drawn stuff as vector graphics(again, AFAIK), but on a raster, so there's no way to get it to tell you where the lines/points are.

You could push each point you pass to ctx.moveTo and ctx.lineTo to a list or other structure. Then, on click, iterate over all line segments (designated by pairs of points you stored) and check if distance of the clicked point to the line segment is within some selection tolerance distance you want.

To check the distance, you can use this: Shortest distance between a point and a line segment

I don't know if this is the simplest way, but it works.

Checking mouse event on line in Context2d

1 Answers1