如何normlize路径（形状），以填补其在HTML5画布

Question

我是新来的HTML5画布绘制IM试图填补这一形状：

这是我使用的代码把它画：

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(); 
    } 

现在，当我从行程变化，以填补我得到这个：

我知道it'sa与绘图的顺序问题，我用翻起空部分解决这一问题中，如3D Studio Max的软件，但这里我真的失去了，我不知道我应该做的解决这个问题。

我想整个形状正常填补，我不知道该如何解释，但我猜图片说，这一切，这是我想：

Answer 1

你会注意到一些有趣的关于您所做的路径：你拿起你的笔moveTo命令。如果你想填补，这是不好的。如果没有的moveTo，你的形状真的是这样的：

填充看起来很奇怪，是因为这些moveTo S的。而你使用moveTo的原因是因为你以有趣的方式使用了arc。

我的建议是不是不使用圆弧以这样的方式结束点是你所期望的，或者使用贝塞尔曲线或二次型，而不是完全。

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

Here's an example of a similar shape done with quadratic curves instead.我没有得到相同的控制点，虽然，你必须做一点你自己。

与二次方程式得出：