A radian measures rotation by using a circle’s own radius: imagine laying one radius along the circle’s edge. The angle that spans that arc is 1 radian. A complete circle is 2π radians, equivalent to 360°, so π radians is 180°. Radians are especially useful when a visual result depends on a position, direction, or portion of a circle. section 9.1.3 section 1.4.7
CSS can express an angle as `rad`, alongside `deg`, `grad`, and `turn`. For example, `1rad` equals `180deg / π`, while `2πrad` is one full turn. Angle units wrap around a circle, so equivalent values can describe the same rotation: `2πrad` and `0rad` represent the same direction. section 9.1.2
The important frontend distinction is that CSS commonly uses readable degrees, but JavaScript `Math` trigonometric methods take unitless radians. Convert at the boundary between them: `radians = degrees * (Math.PI / 180)` and `degrees = radians * (180 / Math.PI)`. `Math.PI` supplies π. section 9.1.3 section 9.6
Convert a rotation for JavaScript
A 45° design angle becomes `Math.PI / 4` radians, so `Math.cos(Math.PI / 4)` can calculate its horizontal component. For a general value, write `const angle = degrees * (Math.PI / 180);`. This lets `Math.sin(angle)` and `Math.cos(angle)` place or animate an element along a circle. section 9.1.3 section 9.6
Turn data into a canvas slice
A pie-chart slice is its fraction of the total circle: `sliceAngle = (item.value / total) * 2 * Math.PI`. Pass the current angle and that ending angle to `ctx.arc()`. Starting at `-Math.PI / 2` places the first slice at 12 o’clock rather than at the right edge. section 14.1.1
Read a pointer direction
For a rotary control, subtract the dial center from the pointer position, then call `Math.atan2(deltaY, deltaX)`. The result is an angle in radians; convert it to degrees when applying a CSS `rotate()` transform. This bridges two-dimensional pointer input and a visual dial position. section 13.2.2
Listing 14.1 Drawing a pie chart from data
HTML:
<canvas id="pieChart" width="400" height="400"></canvas>
JavaScript:
function drawPieChart(canvas, data) {
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2; #1
const centerY = canvas.height / 2; #1
const radius = Math.min(centerX, centerY) - 20; #1
const total = data.reduce((sum, item) => #2
sum + item.value, 0); #2
let currentAngle = -Math.PI / 2; #3
data.forEach(item => {
const sliceAngle = (item.value / total) * #4
2 * Math.PI; #4
ctx.beginPath(); #5
ctx.moveTo(centerX, centerY); #5
ctx.arc(centerX, centerY, radius, #5
➥ currentAngle, #5
➥ currentAngle + sliceAngle); #5
ctx.closePath(); #5
ctx.fillStyle = item.color; #5
ctx.fill(); #5
#5
const labelAngle = currentAngle + sliceAngle / 2; #5
const labelX = centerX + #6
Math.cos(labelAngle) * (radius * 0.7); #6
const labelY = centerY + #6
Math.sin(labelAngle) * (radius * 0.7); #6
#6
ctx.fillStyle = '#000';
ctx.font = '1rem system-ui';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(`${item.label}`, labelX, labelY - 8);
ctx.fillText(`${item.value}%`, labelX, labelY + 8);
currentAngle += sliceAngle; #7
});
}
const browserData = [ #8
{ value: 55, color: 'hsl(203 57% 85%)', label: 'Chrome' },
{ value: 22, color: 'hsl(84 74% 44%)', label: 'Safari' },
{ value: 15, color: 'hsl(23 100% 60%)', label: 'Edge' },
{ value: 8, color: 'hsl(322 100% 61%)', label: 'Other' }
]; #9
let canvas = document.getElementById('pieChart');
drawPieChart(canvas, browserData);
Inspect the complete pie-chart implementation to see radians used as Canvas arc boundaries, with each data value mapped to a proportional part of `2 * Math.PI`. section 14.1.1
Practical takeaway: use degrees where CSS readability matters, convert to radians before JavaScript trigonometry, and treat `2 * Math.PI` as the full-circle budget when drawing arcs or distributing data around a circle. section 9.1.2 section 9.1.3
