Arc

Ellipse, circle and various arcs can be drawn by use of arc function.

arc functions use radians instead of degrees. To convert degrees to radians use the following formula:

var radians = degrees * Math.PI/180;

Note that arc defines the path only. In order to draw the arc we have apply stroke() function.

Functions:

• arc(x, y, radius, startAngle, endAngle, antiClockwise) - creates a path for an arc with the center at x, y. Two angles are defined in radians. direction is false/true, with the default false which causes the arc to be drawn clockwise. To draw a circle, set starting angle as 0 and the ending angle as 2 * PI.
• arcTo(x1, y1, x2, y2, radius) - defines an arc with the given control points and radius, connected to the previous point by a straight line. can be replaced by lineTo() and arc().

Properties:

• fillStyle - specifies the color or style to use inside shapes. The default is #000 (black). Can be Color, Gradient or Pattern. In this demo we use color only. Any CSS color can be used.
• strokeStyle - specifies the color or style to use for the lines around shapes. The default is #000 (black). "You can set the line width of the stroked rectangle using the lineWidth property.

To Do

Try the following options:

ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "black";
ctx.moveTo(80, 100);
ctx.lineTo(240, 100);
ctx.moveTo(200, 60);
ctx.lineTo(200, 220);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = "5";
ctx.moveTo(120, 100);   // Create a starting point.
ctx.arcTo(200, 100, 200, 220, 75); // Create an arc.
ctx.stroke();