Osobiście nigdy nie używałem radianów w sensie "radianów" (miałem zresztą niewiele okazji; pewnie to moje niewyedukowanie matematyczne, może jeszcze kiedyś się doedukuję). Zawsze dopasowywałem tak: 180° ≡ π (oraz pomocniczo 360° ≡ 2π; uwaga – to nie są znaki równości). Stąd wywołanie arc(100,200,50,1*Math.PI,2*Math.PI)
można by zinterpretować jako "utwórz łuk [czyli fragment okręgu] 100px od lewej krawędzi kontenera, 200px od góry kontenera, o promieniu 50px, zaczynając pół okręgu w lewo i kończąc pół okręgu dalej". Pomijam opcjonalny parametr ostatni.
Mnie zawsze myliły się te ćwiartki (teraz też). Dla mnie ich kolejność powinna iść zgodnie z ruchem wskazówek zegara (w prawo), a idzie w lewo (teraz sprawdziłem – http://matematyka.pisz.pl/strona/451.html). Więc mnie ten łuk w myśli tworzy się do góry nogami w stosunku do tego, co jest renderowane przez HTML.
PS. Sprawdziłem teraz – ostatni, pominięty parametr w powyższym wywołaniu właśnie dotyczy kolejności ćwiartek. ;)
UPDATE:
Chyba pytałeś o bardziej zaawansowane obliczenia. Można by tak pomyśleć: jeśli masz utworzyć okręg, powiedzmy, "z wyciętym trójkątem równobocznym" (czyli pomniejszony o jedną szóstą) od góry, dotykający jednocześnie lewej krawędzi i górnej krawędzi kontenera, o promieniu np. 50px – to:
- Wywołanie mogłoby wyglądać tak:
ctx.arc(50, 50, 50, 0 - Math.PI/3, Math.PI + Math.PI/3);
-
Interpretowałbym to tak: "narysuj łuk o promieniu 50px, przylegający do lewej i górnej krawędzi kontenera, od punktu 0 (miejsce startu trzeba tutaj znać) pomniejszonego o 1/3 połowy okręgu, do punktu PI powiększonego o 1/3 połowy okręgu" (w głowie dzielę sobie okrąg na 6 równych części).
-
A wygląda to tak: https://jsfiddle.net/am2dcrhu/2/
Co ciekawe, zauważyłem, że w Canvas domyślnie okrąg rysowany jest jest counterclockwise
– inaczej, niż w podanym przeze mnie odnośniku do strony z kolejnością ćwiartek.
Ja bym to tak liczył. Nie wiem, czy to poprawne myślenie trygonometryczne. Z tego korzystałem: https://www.w3schools.com/tags/canvas_arc.asp