Home Communities
IT Knowledge
Inspiration
Languages
EN

# JavaScript - Math.atan() method example

16 points
Created by:
622

The `Math.atan` function returns number in radians in the range `-Math.PI/2` to `+Math.PI/2`. The function calculates the inverted tangent function value.

``````// ONLINE-RUNNER:browser;

function calculateAngle(a, b) {
return Math.atan(a / b);
}

/*
|\
| \ h - for this function this information is not necessary
a |  \
|__*\ <- angle
b
*/

var a, b;

// a and b build isosceles right triangle
a = 3;
b = a;
console.log( calculateAngle(a, b) ); // 0.7853981633974483 <- ~45 degrees

// a and b build half of equilateral triangle
a = 3;
b = a * Math.sqrt(3);
console.log( calculateAngle(a, b) ); // 0.5235987755982988 <- ~30 degrees

// a and b build very high (+Inf) and slim (~0) triangle
a = +Infinity;
b = 0;
console.log( calculateAngle(a, b) ); // 1.5707963267948966 <- ~90 degrees``````

## 1. Documentation

 Syntax `Math.atan(number)` Parameters `number` - integer or float number value that represents result of operation `opposite / adjacent` on right triangle (primitive value). Result `number` value in radians in the range `-Math.PI/2` to `+Math.PI/2` (primitive value). If value can not be calculated `NaN` is returned. Description `atan` is a static method that takes only one parameter and returns an approximation of the result of the mathematical function arctangent(x).

## 2. Working with degrees

``````// ONLINE-RUNNER:browser;

function calculateAngle(a, b) {
var angle = Math.atan(a / b);

return (180 / Math.PI) * angle; // rad to deg conversion
}

/*
|\
| \ h - for this function this information is not necessary
a |  \
|__*\ <- angle
b
*/

var a, b;

// a an b build isosceles right triangle
a = 3;
b = a;
console.log( calculateAngle(a, b) ); // ~45 degrees

// a and b build half of equilateral triangle
a = 3;
b = a * Math.sqrt(3);
console.log( calculateAngle(a, b) ); // ~30 degrees

// a and b build very high (+Inf) and slim (~0) triangle
a = +Infinity;
b = 0;
console.log( calculateAngle(a, b) ); // ~90 degrees``````

## 3. Canvas plot example

``````// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<style> #canvas { border: 1px solid black; } </style>
<body>
<canvas id="canvas" width="400" height="150"></canvas>
<script>

var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');

// arctangent chart range
var x1 = -10.0;
var x2 = +10.0;
var y1 = -Math.PI / 2;
var y2 = +Math.PI / 2;

var dx = 0.1;

var xRange = x2 - x1;
var yRange = y2 - y1;

function calculatePoint(x) {
var y = Math.atan(x);

// chart will be reversed horizontaly because of reversed canvas pixels

var nx = (x - x1) / xRange;       // normalized x
var ny = 1.0 - (y - y1) / yRange; // normalized y

var point = {
x: nx * canvas.width,
y: ny * canvas.height
};

return point;
}

console.log('x range: <' + x1 + '; ' + x2 + '>');
console.log('y range: <' + y1 + '; ' + y2 + '> // angles in radians');

var point = calculatePoint(x1);

context.beginPath();
context.moveTo(point.x, point.y);

for (var x = x1 + dx; x < x2; x += dx) {
point = calculatePoint(x);
context.lineTo(point.x, point.y);
}

point = calculatePoint(x2);
context.lineTo(point.x, point.y);
context.stroke();

</script>
</body>
</html>``````

## References

1. Inverse trigonometric functions - Wikipedia

## Alternative titles

Join to our subscribers to be up to date with content, news and offers.