1) Le gros bout : je dessine d'abord la grand cercle dont le diamètre d ou 2*R est égal à la largeur du canvas (ici 400px).
Je trace ensuite l'arc de cercle gauche de centre s1 et dont le rayon est égal à la largeur du canvas w. Même chose pour l'arc droit de centre s2.
2) Le petit bout : je trace ensuite le petit cercle de centre s3.
Pour cela il me faut calculer son rayon r :
r = rayon du petit cercle et R = rayon du grand cercle.
R2 + R2 = H2 (Pythagore) ; Donc : H = √(2*R2)
2R = H + r ; Donc : r= 2R - H
2R = w ; soit la largeur du canvas
r = w - H ; Donc : r = w - √(2*R2)
r = 400 - √(2*2002) ; Soit : r = 400 - 282.8 = 117.2 ou encore 0.292*w
NB : J'ai indiqué les longueurs et positionnements en fonction des dimensions du canvas. Ainsi, il est possible de modifier celles-ci sans changer le javascript.