Some arcs

Sometimes it seems a bit annoying that whenever (exaggerating) I write code, I have to write it three times... python, javascript, tikzpicture, SVG, DXF, whatever... (I often generate the initial svg in python; write up papers including tikzpicture)
So this is to just show conversion between an arc in canvas and in SVG and in tikzpicture. In canvas, the default direciton of the arc is clockwise.
click on the red dots on the canvas to move and change the arc (does not work on the SVG). The code below the figures is a stand alone html.

HTLM/JavaScript/Canvas; format for arc: ctx.arc(cx,cy,r, ang1, ang2)

Canvas code:

SVG; format is "A rx ry x-axis-rotation large-arc-flag sweep-flag x y".

SVG code:

For latex tikzpicture, the simplest format is: \draw (x,y) arc (start:stop:radius); I'll put a version with this below.

Latex code:

However, sometimes I prefer to use \usetikzlibrary{angles}, and use the format "\pic [draw, angle radius=radius]{angle=begin--center--end};" so I'll add that too. One is closer to the canvas version, the other closer to the SVG version. Bear in mind that the y-axis is measured in the opposite direction from SVG and canvas. The following you will have to cut and paste and compile yourself. Working out the scale is a bit weird, and I think maybe different when the latex is standalone, perhaps. Tikz is so powerful! There is so much built in!

Latex code: