Рисование разноцветных фигур на пути (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();

В результате получаются обе дуги, заполненные красным, и Я могу сказать, что вокруг меньшего есть слабый черный контур.

Может ли кто-нибудь пролить свет на то, как я могу это сделать? Что я делаю не так?