Arc

Draw an Arc by providing its center co-ordinates, radius, start and end angle.
An arc is a portion of the circumference of a circle.
You can change all the basic properties like stroke and fill and fill-type.

Syntax

                    
  new arc(cx, cy, rx, ry, start_angle, end_angle, fill_type, fill, fill_opacity, stroke, stroke_width);
                

Parameters

cx Number : x-coordinate of the center
cy Number : y-coordinate of the center
rx Number : length of semi-horizontal axis of the arc
ry Number : length of semi-vertical axis of the arc
start_angle Number : angle in radians at which the arc starts
end_angle Number : angle in radians at which the arc ends
fill_type 'pie', 'chord', 'open' : fill type of the arc
fill Color : fill color of the arc
fill_opacity Number [0 to 1] or percentage: fill opacity of the arc
stroke Color : stroke color of the arc
stroke_width Number : stroke width of the arc

Example

                    
    new arc(WIDTH/2-150, HEIGHT/2, 90, 90, 0, 2*PI/3, "pie", "#695fe6", 0.3, "#44d", 2);  
    new arc(WIDTH/2, HEIGHT/2, 90, 90, 0, 2*PI/3, "chord", "#695fe6", 0.3, "#44d", 2);
    new arc(WIDTH/2+150, HEIGHT/2, 90, 90, 0, 2*PI/3, "open", "#695fe6", 0.3, "#44d", 2); 
                     
        
    t=0;
    function draw(){
        clearCanvas();
        new arc(WIDTH/2-50, HEIGHT/2, 90,90, 0, t, "pie", "#695fe6", 0.3, "#44d", 2);

        t+=0.01;
        if(t>2*PI){
            t=0;
        }
        requestAnimationFrame(draw);
    };