html5 canvas로 무지개를 그려보고자 하였습니다.

// 소스

var style = new Array("red", "orange", "yellow", "green", "blue", "navy", "purple");

for (var i = 0; i < 7; ++i) {

context.arc(x, y, r, start, end);

context.lineWidth = width;

context.strokeStyle = style[i];

context.stroke();

r += width;

}

근데 요놈이 첫째 줄인 빨간줄은 잘 그리는데

2번째 줄부터는 모든 줄의 색을 바꾸네요;;

1. 빨간줄 그림

2. 주황색 줄 그림 -> 빨간줄 주황으로 바뀜;

strokeStyle이나 fillStyle를 사용해도 같네요;

어떻게하면 좋을까요 ㅠ