arc() to draw arc circle with fill background with dynamic value

gctx.arc(150,100,40,0,1.0*Math.PI);

x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
r : Radius of Arc or Circle
startAngle: Staring angle in radian
endAngle: Ending angle in radian
direction : (optional) Boolean. True for anticlockwise , False ( default ) for clockwise direction of arc

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.arc(10,100,40,0,0.5*Math.PI);
gctx.stroke();

Drawing Arc ( All Angles in Radian )

gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.stroke();

Drawing Arc ( Input Angles in degree )

var startAngle=40 // In degree 
var endAngle=180 // In degree 
var angle1=(1/180) * startAngle; // In Radian
var angle2=(1/180) * endAngle; // In Radian 
gctx.arc(100,100,40,angle1*Math.PI,angle2*Math.PI,true);
gctx.stroke();

Drawing Arc with strokeStyle()

gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.strokeStyle= 'red';
gctx.stroke();

Drawing Arc with fillStyle()

gctx.arc(100,100,40,1.2*Math.PI,1.8*Math.PI,false);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();

Drawing a Circle

gctx.arc(100,100,40,0,2*Math.PI);
gctx.stroke();

Drawing Circle with strokeStyle()

gctx.arc(100,100,40,0,2*Math.PI);
gctx.strokeStyle= 'red';
gctx.stroke();

Drawing Circle with fillStyle()

var gctx = my_canvas6.getContext("2d");
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();

Drawing Circle with fillStyle() & strokeStyle()

gctx.strokeStyle= 'blue'; // circumference of circle colour
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();

Drawing Circle with fillStyle() & lineWidth()

gctx.strokeStyle= 'blue';
gctx.lineWidth=10;
gctx.arc(100,100,40,0,2*Math.PI);
gctx.fillStyle='red';
gctx.fill();
gctx.stroke();

arc(): Drawing Circles and Arc on Canvas

Subscribe