const { PI } = Math;
// degrees
function deg(x) { return PI * x / 180 }
// draw on canvas
drawOnCanvas2D('#playground', (ctx) => {
const A = vec(200, 40);
const B = A.plus(0, 120);
const C = A.plus(-150, 0);
const R = 40, r = 8;
const wholeRound = [0, 2 * PI];
// draw point
function point(P, color) {
ctx.beginPath();
if (color) ctx.fillStyle = color;
ctx.arc(...P.coords, r, ...wholeRound);
ctx.fill();
}
// label point
function label(text, p, offset = [15, 0]) {
ctx.fillText(text, ...p.plus(...offset).coords);
}
// Tangential lines (from A to B to C)
ctx.beginPath();
ctx.moveTo(...A.coords);
ctx.lineTo(...B.coords);
ctx.lineTo(...C.coords);
ctx.strokeStyle = 'gray';
ctx.stroke();
// Arc (from A to C, controlled by B)
ctx.beginPath();
ctx.moveTo(...A.coords);
ctx.arcTo(...B.coords, ...C.coords, R);
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();
// points
point(A, 'blue'); // start point
point(B, 'red'); // control point 1
point(C); // control point 2
// labels
ctx.font = 'bold 24px serif';
ctx.fillStyle = 'black';
label(`A`, A);
label(`B`, B);
label(`C`, C);
ctx.font = '12px monospace';
label(`moveTo(A)`, vec(250, 100));
label(`arcTo(B, C)`, vec(250, 120));
});
