如何规范化路径（形状）以填充HTML5画布

我是HTML5画布绘图新手，我正在尝试填充此形状：

这是我用来画它的代码：

    function load() {
        draw();
    }

    function draw() {
        var ctx = document.getElementById("canvas").getContext('2d');
        ctx.beginPath();
        ctx.moveTo(37, 205);
        ctx.lineTo(79, 160);
        ctx.lineTo(136, 221);
        ctx.lineTo(167, 188);
        ctx.lineTo(124, 141);
        ctx.quadraticCurveTo(113, 129, 127, 113);
        ctx.lineTo(204, 28);
        ctx.moveTo(149, 22);
        ctx.arc(174, 45, 34, (223 * Math.PI) / 180, (330 * Math.PI) / 180);
        ctx.moveTo(149, 22);
        ctx.lineTo(38, 138);
        ctx.moveTo(37, 205);
        ctx.arc(66, 171, 43, (129 * Math.PI) / 180, (230 * Math.PI) / 180);
        ctx.stroke();
    }

现在，当我从笔划更改为填充时，我得到以下结果：

我知道这是一个绘图顺序的问题，我曾经在3D Studio Max这样的软件中通过翻转空的部分来解决这个问题，但是在这里我迷路了，我不知道该怎么解决这个问题

我希望整个形状都能正常填充，我不知道如何解释，但我猜图像说明了一切，这就是我想要得到的：

---

你会注意到你所走的路线有点滑稽：你正在用

移动到
命令拿起你的笔。如果你想填补空缺，这是不好的。如果不使用moveTo，您的形状实际上如下所示：


填充看起来奇怪的原因是因为这些
moveTo
s。您使用moveTo的原因是您以一种有趣的方式使用了
arc

我的建议是，不要以这样的方式使用圆弧，即终点在您期望的位置，或者使用贝塞尔或四分法

在我看来，弧是一种痛苦的使用好，所以我建议只使用贝塞尔/二次曲线代替

我没有得到完全相同的控制点，但是，你将不得不自己做这一点

用二次曲线绘制：

回答得很好，但我想问一下，你是如何计算出控制点的这正是我为什么不使用二次曲线的原因，因为我不知道如何计算它们的，你能告诉我plz吗？