If you are dealing with complex angles, utilizing a canvas is highly recommended. Here is a sample code snippet to demonstrate how you can achieve your desired output:
// Code for canvas setup
var canvas = document.getElementById('fraction');
var context = canvas.getContext('2d');
// Define initial coordinates and radius of the circle segment
var x = 80;
var y = 80;
var radius = 75;
// Customize fraction values here
var numerator = 1;
var denominator = 4;
var fraction = numerator / denominator;
// Calculate start and end angles for segment plotting
var startAngle = Math.PI;
var endAngle = (1 + (2 * fraction)) * startAngle;
// Specify clockwise or anti-clockwise drawing direction
var drawClockwise = false;
// Draw the segment
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, drawClockwise);
context.lineTo(x, y);
context.closePath();
context.fillStyle = 'yellow';
context.fill();
//***************** Edit *******************
// Add outline around the segment
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, drawClockwise);
context.closePath();
context.strokeStyle = '#000';
context.stroke();
<div>
<canvas id="fraction" width="200" height="200"></canvas>
</div>
Adjust the variables like numerator, denominator, and fraction to suit your needs. These control the appearance of the segment based on the specified fraction.
You have the flexibility to modify other parameters such as size, position, and direction of the shape. Feel free to experiment with different settings to enhance your design!
For more details on drawing shapes and setting colors in canvas, refer to this link. Additionally, learn about canvas basics from tutorials like this and here.
Hope this information proves helpful! Good luck with your implementation :)