How to join an edge of fabric.js Path to a circle?

Question

I found an example for quadratic curve in the fabric.js website.

I want to join a fabric.js circle with one of the edges of the quadratic curve. Is there a way to do it. If I group the point representing one of the edges with say a circle, the point gets separated from the path upon moving the circle

Update after trying out a few things

There are two elements - One a circle and another a quadratic curve

With hints from the following link:

https://stackoverflow.com/questions/30652000/control-line-points-make-rectangle-follow-line-but-make-bounding-box-adapt-to-n

The following code has been written for testing:

a. User clicks on the circle (so it becomes activeObject). After that, the following function is run:

join_obj1 = canvas.getActiveObject(); // The circle in this case

join_obj2 = the first point (p0) of the line

join_obj3 = the third point (p3) of the line

join_obj1.on('moving', function (options) {
    var x=join_obj1.getLeft();
    var y=join_obj1.getTop();
    join_obj3.path[0] = ["M", x, y]; // Sets the path co-ordinates
    join_obj2.top = y;               // Sets the first point co-ordinates
    join_obj2.left = x;              // Sets the first point co-ordinates
// Following will be tried for joining the third point
//        join_obj3.top = y;
//        join_obj3.left = x;

    canvas.renderAll();
    
});

The above code is successfully able to join the left edge of the line (the first point and the line's origin) to the circle and it works fine. When I move the circle, the line and the first point move with it. However, I am not sure how to join the right side edge of the line with the circle. join_obj3.path[0] = ["M", x, y] sets the co-ordinates for the left side of the path. However, I am not sure how to set the right side edge of the path to specific values

Answer 1

Quadratic bézier curves are defined using the 'Q' directive in the fabric.Path. The initial 'M' directive sets the first point (65,0). Two co-ordinates follow the 'Q'; the single control point (100,100) and the final point we’re drawing to (300,100).

That means you last point in the Quadratic Bézier Curve is x = 300, y = 100.

So try something like join_obj3.path[1] = ["Q", 100, 100, x, y];

Here is a nice example of a Quadratic Bézier Curve.