在路径中绘制不同颜色的形状（HTML5 Canvas / Javascript）

我正在尝试绘制多个填充不同颜色的圆弧

        //-------------- draw
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(30, 30, 20, 0, Math.PI*2, true);
        ctx.fill();
        ctx.fillStyle = "red";
        ctx.arc(100, 100, 40, 0, Math.PI*2, true);
        ctx.fill();
        ctx.closePath();

这会产生两条充满红色的弧线，我可以看出较小的弧线周围有一个淡淡的黑色轮廓。

谁能告诉我如何实现这一目标？我做错了什么？

关闭该路径，然后重新打开它。

ctx.closePath();
ctx.beginPath();

jsFiddle http://jsfiddle.net/j9c5P/.

...在圆弧绘制代码之间。