Javascript and Canvas: How to get rid of the moire effect in my gyroscope

Question

Just out of fun, I made that little toy (gyro?) Using Javascript and Canvas. Unfortunately, it has an ugly moire effect on it (see screenshot below). http://jsfiddle.net/8bac4s9v/1/

function draw() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.imageSmoothingEnabled = false;

    var colors = [
        ['blue', 'yellow'],
        ['white', 'pink'],
        ['green', 'red'],
        ['white', 'black'],
        ['green', 'blue'],
        ['red', 'green', 'blue']
    ];

    for (var i = 0; i < 12; i++) {
        for (var cIdx = 0, p = 0; p < 120; p += 20, cIdx++) {
            var cols = colors[cIdx];
            for (var r = p; r < p + 20; r++) {
                ctx.beginPath();
                ctx.arc(125, 125, r, (i - 1) * Math.PI / 6.0, i * Math.PI / 6.0);
                ctx.strokeStyle = cols[i % cols.length];
                ctx.stroke();
            }
        }
    }
}

I suppose that the effect of moire comes from smoothing. So I thought that I could get rid of that Moiré effect when turning off anti-aliasing with ctx.imageSmoothingEnabled = false. But no, nothing is changing.

Any ideas?

Thanks Bernhard

Here's what it looks like:

Answer 1

, , - , , -, . imageSmoothingEnabled drawImage, .

1px-, 20px, 20 . , , . - , :

http://jsfiddle.net/foskc95k/2/

ctx.lineWidth = 21;

for (var i = 0; i < 12; i++) {
    for (var cIdx = 0, r = 10; r <= 110; r += 20, cIdx++) {
        var cols = colors[cIdx];
        ctx.beginPath();
        ctx.arc(125, 125, r, (i - 1) * Math.PI / 6.0, i * Math.PI / 6.0);
        ctx.strokeStyle = cols[i % cols.length];
        ctx.stroke();
    }
}

, lineWidth 21px 20px, , , 1px ( , ).

Answer 2

lineWidth , ctx.lineWidth = 2, Moiré.

...
var ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false;
ctx.lineWidth=2;
...

http://jsfiddle.net/p4obo996/

, . , ctx.fillStyle ctx.fill() ctx.strokeStyle .