I need a mechanism for detecting mouseover event for lines, curves and polylines which have a various stroke width, I have already made such a mechanism for rectangles and ellipses, so I'm not new with canvas API. I do outline all of the drawn objects and detect mouse position over them, when rectangles or ellipses have a stroke width more than 1 pixel I expand the path so that it contains the border too. For lines and polylines it is difficult for me to understand how should I expand them when I have a lineWidth of 20 pixels for example.
My question is: how to transform lines, curves and polylines in some shape path, so that this path could contain all their width?
I would need that the path created would contain the line / curve width represented with black in this image.
----------Some more information----------
I will try to simplify the problem: We have 2 points (represented in red on the image below), they form a line that have a specific formula (y = mx + n), I need to dermine the formulas of perpendicular lines that are passing through these two initial points, after, it is necessary to determine the positions of the "blue" points, which are at the distance of the half of the value of context.lineWidth, when all points have been determined it is possible to create a new path using moveTo() and lineTo() sequence. This method should be applicable for quadratic and bezier curves using control points. The problem only remains in these mathematical calculations.