Skip to content

atan2() calculation always returns an <angle> in degrees, not radians #42283

@Jollus174

Description

@Jollus174

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/atan2

What specific section or headline is this issue about?

The introduction (and possibly other sections of page).

What information was incorrect, unhelpful, or incomplete?

I might be misunderstanding here, but it mentions.

The function accepts two arguments and returns the number of radians representing an between -180deg and 180deg.

I've tested this, and wouldn't this actually be the number of degrees between -180deg and 180deg?
For example, applying a radians-to-degress conversion via:

  --angle-rad: atan2(3, 2);
  --angle-deg: calc(var(--angle-rad) * 180 / pi);

would end up with a wildly incorrect result for --angle-deg.
In this example, I'd used CSS trigonmetry calculations to offset a gradient based off the position of the mouse relative to the centre of the screen: https://codepen.io/Jollus/pen/WbweZoX
We can see in JS angle rad in the top-left what the radians is expected to be, calculated with JavaScript. However, this is not what ends up being applied to the --angle (the CSS calculation).

Image

To me, it seems clear that atan2() is returning the result in degrees, and not radians. This may be so for other trigonometry calculations as well, although I've not tested those.

What did you expect to see?

I would think that any reference to atan2() returning radians would need to be updated to show that it returns degrees instead, unless there's something I'm missing here.

Do you have any supporting links, references, or citations?

https://codepen.io/Jollus/pen/WbweZoX

Image

Do you have anything more you want to share?

No response

MDN metadata

Page report details

Metadata

Metadata

Assignees

No one assigned

    Labels

    Content:CSSCascading Style Sheets docsgood first issueA good issue for newcomers to get started with.

    Type

    No type

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions