How to convert degrees to radians in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Converting degrees to radians is essential for trigonometric functions, canvas graphics, SVG animations, and geometric transformations in JavaScript applications.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve used this conversion in chart rotations, animation systems, and canvas-based components.
JavaScript’s Math.sin(), Math.cos(), and Math.tan() all expect radian values — degrees must be converted before use.
For the inverse operation, see how to convert radians to degrees in JavaScript.
Multiply degrees by Math.PI / 180 to convert to radians.
90 * (Math.PI / 180) // 1.5707963267948966 (π/2)
180 * (Math.PI / 180) // 3.141592653589793 (π)
360 * (Math.PI / 180) // 6.283185307179586 (2π)
1. Reusable Helper Function
Wrap the formula in a named function so intent is clear at every call site.
const toRadians = deg => deg * (Math.PI / 180)
toRadians(0) // 0
toRadians(45) // 0.7853981633974483 (π/4)
toRadians(90) // 1.5707963267948966 (π/2)
toRadians(180) // 3.141592653589793 (π)
toRadians(270) // 4.71238898038469 (3π/2)
toRadians(360) // 6.283185307179586 (2π)
2. Pre-Calculated Constant for High-Performance Code
In animation loops, canvas rendering, or tight loops that convert many angles, avoid recomputing Math.PI / 180 on every call by caching it as a constant.
const DEG_TO_RAD = Math.PI / 180
// In an animation loop — no repeated division
function rotatePoint(x, y, degrees) {
const rad = degrees * DEG_TO_RAD
return {
x: x * Math.cos(rad) - y * Math.sin(rad),
y: x * Math.sin(rad) + y * Math.cos(rad)
}
}
The division Math.PI / 180 is evaluated once at module load time rather than on every frame.
3. Using Converted Values with Trig Functions
The most common reason to convert is to feed the result into Math.sin(), Math.cos(), or Math.tan().
const toRadians = deg => deg * (Math.PI / 180)
Math.sin(toRadians(30)) // 0.5 — sin 30° = 1/2
Math.cos(toRadians(60)) // 0.5 — cos 60° = 1/2
Math.sin(toRadians(90)) // 1 — sin 90° = 1
Math.cos(toRadians(0)) // 1 — cos 0° = 1
Math.tan(toRadians(45)) // 1 — tan 45° = 1
Math.cos(toRadians(180)) // -1 — cos 180° = -1
Passing degrees directly (e.g. Math.sin(90)) gives wrong results — Math.sin(90) returns 0.8939..., not 1.
4. Canvas Rotation
The Canvas API uses radians for all angle parameters. Convert before drawing rotated shapes.
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
const toRadians = deg => deg * (Math.PI / 180)
ctx.save()
ctx.translate(100, 100) // move origin to center
ctx.rotate(toRadians(45)) // rotate 45 degrees
ctx.fillRect(-25, -25, 50, 50) // draw centered square
ctx.restore()
5. SVG and CSS Transforms
While CSS rotate() accepts degrees natively (rotate(45deg)), SVG transform attributes and some math utilities expect radians.
const toRadians = deg => deg * (Math.PI / 180)
// SVG rotation matrix
function svgRotateMatrix(degrees, cx, cy) {
const rad = toRadians(degrees)
const cos = Math.cos(rad)
const sin = Math.sin(rad)
return `matrix(${cos},${sin},${-sin},${cos},${cx * (1 - cos) + cy * sin},${cy * (1 - cos) - cx * sin})`
}
// Apply to an SVG element
element.setAttribute('transform', svgRotateMatrix(30, 50, 50))
6. Common Reference Table
| Degrees | Radians | Exact |
|---|---|---|
| 0° | 0 | 0 |
| 30° | 0.5236 | π/6 |
| 45° | 0.7854 | π/4 |
| 60° | 1.0472 | π/3 |
| 90° | 1.5708 | π/2 |
| 180° | 3.1416 | π |
| 270° | 4.7124 | 3π/2 |
| 360° | 6.2832 | 2π |
Best Practice Note:
Always convert with deg * (Math.PI / 180) — never hardcode approximate values like deg * 0.01745.
Cache Math.PI / 180 as a module-level constant when you convert in loops or animation frames.
For the inverse, multiply radians by 180 / Math.PI — see how to convert radians to degrees in JavaScript.
