実行結果

コード

/* 色の定義（赤、橙、黄、緑、青、藍、紫） */
var colors = ["red", "orange", "yellow", "green", "blue", "navy", "purple"];
/* 線の太さをセット */
ctx.lineWidth = 10;
/* 円弧を繰り返し描画 */
for( var i=0; i<colors.length; i++ ) {
  /* 下に10だけ移動する変換マトリックスを定義 */
  ctx.transform(1, 0, 0, 1, 0, 10);
  /* 色をセット */
  ctx.strokeStyle = colors[i];
  /* 円弧を描画 */
  ctx.beginPath();
  ctx.arc(50, 100, 100, 0, Math.PI, true);
  ctx.stroke();
}