I am working on a simple whiteboard application where the drawings are represented by quadratic Bezier curves (using the JavaScript's CanvasPath.quadraticCurveTo function). I am trying to implement functionality so that an eraser tool or a selection tool are able to determine if they are touching a drawing.

To show what I'm talking about, in the following image is a red drawing and I need to be able to determine that the black rectangles and black point overlap with the area of the drawing. For debugging purposes I have added blue circles which are control points of the curve and the green line which is the same Bezier curve but with a much smaller width.

I have included my code which generates the Bezier curve:

        context.beginPath();
        context.moveTo(localPoints[0].x, localPoints[0].y);
        let i;
        for (i = 1; i < localPoints.length - 2; i++)
        {
            let xc = (localPoints[i].x + localPoints[i + 1].x) / 2;
            let yc = (localPoints[i].y + localPoints[i + 1].y) / 2;
            context.quadraticCurveTo(localPoints[i].x, localPoints[i].y, xc, yc);
        }
        // curve through the last two points
        context.quadraticCurveTo(localPoints[i].x, localPoints[i].y, localPoints[i + 1].x, localPoints[i + 1].y);
        context.stroke();

I have been able to find answers on how to determine if a line segment intersects a Bezier curve, but I have not been able to find how to determine if something does not intersect the actual curve but is close enough to be considered to overlap its "area". To do so, I figure that I need to just find the distance between the curve and the rectangle/point and then make sure than distance is less than the width used to draw the curve, but I am unsure on how to find that distance.