How can I calculate the area of a bezier curve?

Question

Given the following path (for example) which describes a SVG cubic bezier curve: \"M300,140C300,40,500,40,500,140\", and assuming a straight line connecting the end points 3

Answer 1

Square area covered by radius vector of a point moving in 2D plane is 1/2*integral[(x-xc)*dy/dt - (y-yc)*dx/dt]dt. Here xc and yc are coordinates of the origin point (center). Derivation for the case of Bezier curves is rather cumbersome but possible. See functions squareAreaQuadr and squareAreaCubic below. I have tested and retested these formulae, rather sure, that there are no mistakes. This signature gives positive square area for clockwise rotation in SVG coordinates plane.

    var xc=0.1, yc=0.2, x0=0.9, y0=0.1, x1=0.9, y1=0.9, x2=0.5, y2=0.5, x3=0.1, y3=0.9
    var cubic = document.getElementById("cubic");
    cubic.setAttribute("d", "M "+xc*500+" "+yc*500+" L "+x0*500+" "+y0*500+" C "+x1*500+" "+y1*500+" "+x2*500+" "+y2*500+" "+x3*500+" "+y3*500+" L "+xc*500+" "+yc*500);
    var center1 = document.getElementById("center1");
    center1.setAttribute("cx", xc*500);
    center1.setAttribute("cy", yc*500);

    function squareAreaCubic(xc, yc, x0, y0, x1, y1, x2, y2, x3, y3)
        {
        var s;
        s = 3/4*( (x0-xc)*(y1-y0) + (x3-xc)*(y3-y2) ) +
        1/4*(x3-x0)*(y1+y2-y0-y3) +
        1/8*( (x0+x3-2*xc)*(3*y2-3*y1+y0-y3) + (x1+x2-x0-x3)*(y1-y0+y3-y2) ) +
        3/40*( (2*x1-x0-x2)*(y1-y0) + (2*x2-x1-x3)*(y3-y2) ) +
        1/20*( (2*x1-x0-x2)*(y3-y2) + (2*x2-x1-x3)*(y1-y0) + (x1+x2-x0-x3)*(3*y2-3*y1+y0-y3) ) +
        1/40*(x1+x2-x0-x3)*(3*y2-3*y1+y0-y3) -
        3/4*( (y0-yc)*(x1-x0) + (y3-yc)*(x3-x2) ) -
        1/4*(y3-y0)*(x1+x2-x0-x3) -
        1/8*( (y0+y3-2*yc)*(3*x2-3*x1+x0-x3) + (y1+y2-y0-y3)*(x1-x0+x3-x2) ) -
        3/40*( (2*y1-y0-y2)*(x1-x0) + (2*y2-y1-y3)*(x3-x2) ) -
        1/20*( (2*y1-y0-y2)*(x3-x2) + (2*y2-y1-y3)*(x1-x0) + (y1+y2-y0-y3)*(3*x2-3*x1+x0-x3) ) -
        1/40*(y1+y2-y0-y3)*(3*x2-3*x1+x0-x3) ;
        return s;
        }

    var s = squareAreaCubic(xc, yc, x0, y0, x1, y1, x2, y2, x3, y3);
    document.getElementById("c").innerHTML = document.getElementById("c").innerHTML + s.toString();

    
    
    
Bezier square area
    
Quadratic: S = 

    

    

    
Cubic: S =