Two Point Quadratic Bezier Curve

Draw a Quadratic bezier curve between two points. The curve is defined by the points (x1,y1) and (x2,y2) as anchor points and the points (xc,yc) as the control points.
.
You can change all the basic properties like fill and stroke.

Syntax

                    
    new twoPointQuadraticBezier(x1, y1, xc, yc, x2, y2, fill, fill_opacity, stroke, stroke_width);

Parameters

x1	Number : x-coordinate of the starting point
y1	Number : y-coordinate of the starting point
xc	Number : x-coordinate of the control point
yc	Number : y-coordinate of the control point
x2	Number : x-coordinate of the ending point
y2	Number : y-coordinate of the ending point
fill	Color : fill color of the curve
fill_opacity	Number [0 to 1] or percentage: fill opacity of the curve
stroke	Color : stroke color of the curve
stroke_width	Number : stroke width of the curve

Example

                    
    new twoPointQuadraticBezier(100,3*HEIGHT/4, 200, HEIGHT/4,300,3*HEIGHT/4, "#695fe6", 0, "#695fe6", 2);

    new line(100,3*HEIGHT/4, 200, HEIGHT/4, "#F5C7F7", 1, "round",'10 10');
    new line(300,3*HEIGHT/4, 200, HEIGHT/4, "#F5C7F7", 1, "square",'10 10');

    new point(100,3*HEIGHT/4, "#695fe6", 4);
    new point(200,HEIGHT/4, "#F5C7F7", 4);
    new point(300,3*HEIGHT/4, "#695fe6", 4);

        
    t=0;
    function draw(){
        clearCanvas();
        new twoPointQuadraticBezier(100,3*HEIGHT/4, 200, HEIGHT/2-t,300,3*HEIGHT/4, "#695fe6", 0, "#695fe6", 2);
            
        new line(100,3*HEIGHT/4, 200, HEIGHT/2-t, "#F5C7F7", 1, "round",'10 10');
        new line(300,3*HEIGHT/4, 200, HEIGHT/2-t, "#F5C7F7", 1, "square",'10 10');

        new point(100,3*HEIGHT/4, "#695fe6", 4);
        new point(200,HEIGHT/2-t, "#F5C7F7", 4);
        new point(300,3*HEIGHT/4, "#695fe6", 4);
        if(t>=HEIGHT/2){
            t=-HEIGHT/4;
        }

        t+=0.1;
        requestAnimationFrame(draw);
    }