如何用代码在浏览器中绘制并标注已知参数的三角形？

// 三角形顶点坐标
const A = { x: 50, y: 300 };
const B = { x: 250, y: 300 };
const C = { x: 150, y: 100 };

// 计算边长
const AB_length = Math.hypot(B.x - A.x, B.y - A.y);
const BC_length = Math.hypot(C.x - B.x, C.y - B.y);
const CA_length = Math.hypot(A.x - C.x, A.y - C.y);

// 计算角度 (使用余弦定理)
const angle_A = Math.acos((AB_length**2 + CA_length**2 - BC_length**2) / (2 * AB_length * CA_length));
const angle_B = Math.acos((BC_length**2 + AB_length**2 - CA_length**2) / (2 * BC_length * AB_length));
const angle_C = Math.acos((CA_length**2 + BC_length**2 - AB_length**2) / (2 * CA_length * BC_length));


// 获取 Canvas 上下文
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

// 绘制三角形
ctx.beginPath();
ctx.moveTo(A.x, A.y);
ctx.lineTo(B.x, B.y);
ctx.lineTo(C.x, C.y);
ctx.closePath();
ctx.strokeStyle = 'black';
ctx.stroke();

// 标注边长和角度
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText(`AB = ${AB_length.toFixed(2)}`, (A.x + B.x) / 2, (A.y + B.y) / 2 + 20);
ctx.fillText(`BC = ${BC_length.toFixed(2)}`, (B.x + C.x) / 2, (B.y + C.y) / 2 + 20);
ctx.fillText(`CA = ${CA_length.toFixed(2)}`, (C.x + A.x) / 2, (C.y + A.y) / 2 + 20);
ctx.fillText(`∠A = ${ (angle_A * 180 / Math.PI).toFixed(2)}°`, A.x - 20, A.y - 20);
ctx.fillText(`∠B = ${ (angle_B * 180 / Math.PI).toFixed(2)}°`, B.x, B.y - 20);
ctx.fillText(`∠C = ${ (angle_C * 180 / Math.PI).toFixed(2)}°`, C.x, C.y + 30);