Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are start angle and end angle of arc in HTML5 canvas?
The arc() method in HTML5 Canvas creates circular arcs and full circles. The startAngle and endAngle parameters define which portion of the circle to draw, measured in radians from the positive x-axis.
Syntax
Following is the syntax for the arc() method −
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Parameters
The arc() method accepts the following parameters −
- x, y − Coordinates of the circle's center point
- radius − The radius of the circle in pixels
- startAngle − Starting angle in radians, measured from the positive x-axis
- endAngle − Ending angle in radians, measured from the positive x-axis
- anticlockwise − Boolean value; true draws counterclockwise, false draws clockwise (default)
Understanding Start and End Angles
Angles in Canvas are measured in radians, not degrees. The angle measurement starts from the positive x-axis (3 o'clock position) and increases clockwise by default. Key angle positions are −
- 0 radians − Right side (3 o'clock)
- ?/2 radians (90°) − Bottom (6 o'clock)
- ? radians (180°) − Left side (9 o'clock)
- 3?/2 radians (270°) − Top (12 o'clock)
- 2? radians (360°) − Full circle, back to start
Converting Degrees to Radians
Since many developers think in degrees, here's the conversion formula −
radians = degrees * (Math.PI / 180)
Common conversions −
- 90° = ?/2 ? 1.57 radians
- 180° = ? ? 3.14 radians
- 270° = 3?/2 ? 4.71 radians
- 360° = 2? ? 6.28 radians
Drawing Different Arc Segments
Example − Quarter Circle (90°)
Following example draws a quarter circle from 0 to ?/2 radians −
<!DOCTYPE html>
<html>
<head>
<title>Quarter Circle Arc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Quarter Circle (0 to ?/2 radians)</h3>
<canvas id="quarterCanvas" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById('quarterCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI/2, false);
ctx.lineWidth = 4;
ctx.strokeStyle = '#e74c3c';
ctx.stroke();
// Mark center point
ctx.fillStyle = '#333';
ctx.fillRect(147, 97, 6, 6);
</script>
</body>
</html>
The output shows a red quarter-circle arc from the right side (0 radians) to the bottom (?/2 radians) −
[Canvas showing a red quarter-circle arc from 3 o'clock to 6 o'clock position]
Example − Half Circle (180°)
Following example creates a half circle from 0 to ? radians −
<!DOCTYPE html>
<html>
<head>
<title>Half Circle Arc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Half Circle (0 to ? radians)</h3>
<canvas id="halfCanvas" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById('halfCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI, false);
ctx.lineWidth = 4;
ctx.strokeStyle = '#3498db';
ctx.stroke();
// Mark center point
ctx.fillStyle = '#333';
ctx.fillRect(147, 97, 6, 6);
</script>
</body>
</html>
The output displays a blue half-circle arc from the right side to the left side −
[Canvas showing a blue half-circle arc from 3 o'clock to 9 o'clock position]
Example − Custom Arc Segment
Following example demonstrates drawing an arc from ?/4 to 3?/4 radians (45° to 135°) −
<!DOCTYPE html>
<html>
<head>
<title>Custom Arc Segment</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Custom Arc (?/4 to 3?/4 radians)</h3>
<canvas id="customCanvas" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById('customCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 80, Math.PI/4, 3*Math.PI/4, false);
ctx.lineWidth = 4;
ctx.strokeStyle = '#9b59b6';
ctx.stroke();
// Mark center and angle lines
ctx.strokeStyle = '#ddd';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(150, 100);
ctx.lineTo(207, 57); // ?/4 direction
ctx.moveTo(150, 100);
ctx.lineTo(93, 57); // 3?/4 direction
ctx.stroke();
ctx.fillStyle = '#333';
ctx.fillRect(147, 97, 6, 6);
</script>
</body>
</html>
The output shows a purple arc segment with gray reference lines indicating the start and end angles −
[Canvas showing a purple arc from 45° to 135° with reference lines]
Clockwise vs Counterclockwise Direction
Example − Anticlockwise Parameter
Following example compares clockwise and counterclockwise arc drawing −
<!DOCTYPE html>
<html>
<head>
<title>Clockwise vs Counterclockwise</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Direction Comparison</h3>
<canvas id="directionCanvas" width="400" height="200" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById('directionCanvas');
const ctx = canvas.getContext('2d');
// Clockwise arc (default)
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI, false);
ctx.lineWidth = 4;
ctx.strokeStyle = '#e74c3c';
ctx.stroke();
// Counterclockwise arc
ctx.beginPath();
ctx.arc(300, 100, 60, 0, Math.PI, true);
ctx.lineWidth = 4;
ctx.strokeStyle = '#27ae60';
ctx.stroke();
// Labels
ctx.fillStyle = '#333';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText('Clockwise', 100, 180);
ctx.fillText('Counterclockwise', 300, 180);
</script>
</body>
</html>
The output displays two arcs: a red clockwise semicircle on the left and a green counterclockwise semicircle on the right −
[Canvas showing red clockwise arc on left, green counterclockwise arc on right] Clockwise Counterclockwise
Conclusion
The startAngle and endAngle parameters in Canvas arc() method define the arc segment in radians, starting from the positive x-axis. Understanding that 0 radians points right and angles increase clockwise helps create precise arc shapes. The anticlockwise parameter controls drawing direction when you need the arc to go the shorter or longer way around the circle.
587 Views
