HTML
<script src="https://cindyjs.org/dist/latest/Cindy.js"></script>
<div id="CSCanvas"></div>
<script>
CindyJS({
scripts: "cs*",
defaultAppearance: { fontFamily: "sans-serif", lineSize: 1, pointSize: 5.0, textsize: 12.0 },
angleUnit: "°",
geometry: [
{ name: "A", type: "Free", pos: [ 3.68, 0.8, 4.0 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "B", type: "Free", pos: [ 4.0, 0.18300653594771243, 0.6535947712418301 ], color: [ 1.0, 0.0, 0.0 ], labeled: true },
{ name: "a", type: "Join", color: [ 0.0, 0.0, 1.0 ], args: [ "A", "B" ], visible: false, size: 2, clip: "inci" },
{ name: "b", type: "Orthogonal", color: [ 0.0, 0.0, 1.0 ], args: [ "a", "B" ], visible: false, size: 2, clip: "inci" },
{ name: "C", type: "PointOnLine", pos: [ -3.1369793278418916, -4.0, -0.5222660176590709 ], color: [ 1.0, 0.0, 0.0 ], args: [ "b" ], labeled: true },
{ name: "c", type: "Parallel", color: [ 0.0, 0.0, 1.0 ], args: [ "a", "C" ], visible: false, clip: "inci" },
{ name: "d", type: "Orthogonal", color: [ 0.0, 0.0, 1.0 ], args: [ "a", "A" ], visible: false },
{ name: "D", type: "Meet", color: [ 1.0, 0.0, 0.0 ], args: [ "c", "d" ], labeled: true },
{ name: "M", type: "Mid", color: [ 1.0, 0.0, 0.0 ], args: [ "A", "C" ], labeled: true },
{ name: "C0", type: "CircleByRadius", pos: { xx: -0.1543125096692, yy: -0.1543125096692, zz: 1.0, xy: 0.0, xz: 1.068842198214778, yz: -1.2127315453065477 }, color: [ 0.0, 0.0, 1.0 ], radius: 5.823665851756885, args: [ "M" ], printname: "$C_{0}$" },
{ name: "X", type: "PointOnCircle", pos: [ 4.0, { r: -1.0351808338762583, i: 1.2516602980598915E-16 }, { r: 0.7068628492953155, i: -3.321946295051289E-17 } ], color: [ 1.0, 0.0, 0.0 ], args: [ "C0" ], labeled: true },
{ name: "e", type: "Join", color: [ 0.0, 0.0, 0.0 ], args: [ "X", "M" ], visible: false, dashtype: "dashdot" },
{ name: "f", type: "Orthogonal", color: [ 0.0, 0.0, 1.0 ], args: [ "e", "M" ], visible: false },
{ name: "F", type: "Meet",...