Оптимизация Canvas

Здравствуйте, начал изучать canvas ,но столкнулся с проблемой оптимизации. Искал инфу но так и не понял что именно нужно делать. заливка полосок ест очень много ресурсов наверно 90% из возможных при 5 штуках 20/250 , если убирать заливку(на 35 строке) то выходит 200/250 (Проверки в последней версии хрома.)

Это сейчас без анимации,а так там будет куча движения. Тогда вобще не представляю что будет.Самое печальное что это будет на весь размер экрана. https://jsfiddle.net/vbc0m5Ly/

Может найдутся гуру которые укажут как именно увеличить или сгладить все чтобы не было тормозов в дальнейшем. Знаю библиотеку threejs,но не разу не работал с ней есть смысл ее использовать ?

Если говорить о анимации,то круг будет (как бы) приближаться сдали и располагаться в какой то точке,при этом полоски будут в движении.

вот код который отвечает за основную работу

 var LBB = 'rgba(12,168,224,.9)',
 LBLB = 'rgba(62,218,244,.9)',
 LL = 'rgba(150,130,225,.9)',
 LGG = 'rgba(148,188,162,.9)',
 LLB = 'rgba(68,190,242,.9)',
 LOLB = 'rgba(80,193,241,.3)';
 M = [
 ["LBB_R", 0.0 , 78.28,  6  , 35.0,LBB,1],
 ["LL1", 5.8 ,  6.5 ,  7  , 41.5,LL],
 ["LL2", 5.8 ,  6.1 ,  5  , 54.5,LL],
 ["LGG1", 0.1 ,  1.65,  8  , 51.5,LGG],
 ["LLB1", 3.2 ,  5.75, 12  , 50.5,LLB],
 ["LLB2", 1.8 ,  3.1 , 18.5, 47.2,LLB],
 ["LBLB", 1.1 ,  2.85,  7  , 43.5,LBLB],
 ["LOLB", 0   ,  0.9 ,  9.5, 42.7,LOLB],
 ["LL_R", 0   ,  6.28,  2  , 59  ,LL,1],
 ["LL1_R", 0.2 ,  0.37,  2.7, 61.3,LL],
 ["LL2_R", 0.5 ,  1   ,  2.7, 61.3,LL],
 ["LL3_R", 2   ,  2.45,  2.7, 61.3,LL],
 ["LL4_R", 2.65,  2.85,  2.7, 61.3,LL],
 ["LL5_R", 3   ,  3.4 ,  2.7, 61.3,LL],
 ["LL6_R", 3.7 ,  4.1 ,  2.7, 61.3,LL],
 ["LL7_R", 4.2 ,  4.5 ,  2.7, 61.3,LL],
 ["LL8_R", 4.7 ,  5   ,  2.7, 61.3,LL],
 ["LL9_R", 5.1 ,  5.5 ,  2.7, 61.3,LL],
 ["LL10_R", 5.9 ,  6.28,  2.7, 61.3,LL],
 ["LBLB_R", 0   , 78.28,  3  , 65  ,LBLB,1],
 ["LLb1", 5.23,  5.7 ,  8  , 72.5,LL],
 ["LLb2", 6.13,  6.85,  8  , 72.5,LL],
 ["LLb3", 1.3 ,  2.3 , 14  , 76.5,LL],
 ["LLb4", 4.02,  5.1 , 14  , 76.5,LL],
 ["LGG_R", 0   ,  7   ,  4.5, 84  ,LGG,1],
 ["LLl", 1.7 ,  5.05,  2  , 86.5,LBB],
 ["LBB_R2", 0   , 78.28,  3  , 90  ,LBB,1],
 ["LBB1", 4.7 ,  5.05,  4  , 93.5,LBB],
 ["LBB2", 5.65,  6   ,  4  , 93.5,LBB],
 ["LBB3", 0.4 ,  0.48,  4  , 93.5,LBB],
 ["LBB4", 1   ,  1.18,  8  , 95.5,LBB],
 ["LBB5", 2   ,  2.45,  4  , 93.5,LBB],
 ["LBB6", 2.9 ,  3.1 ,  4  , 93.5,LBB],
 ["LBB7", 3.3 ,  3.75,  4  , 93.5,LBB],
 ["LBB8", 4.2 ,  4.45,  4  , 93.5,LBB],
 ["LBB9", 0   ,  0.08,  4  , 93.5,LBB]]
 function CreateLine(x,y,sp,ep,w,r,style,s,d){
 ctx.fillStyle = style;
  ctx.beginPath();
  ctx.arc(x,y,(r+w/2)*s,ep,sp,true);
  if(d){ ctx.moveTo(x+(r-w/2)*s,y+0) }
  ctx.arc(x,y,(r-w/2)*s,sp,ep);
  ctx.fill();
  ctx.closePath();
  ctx.stroke();
 }

for(var i = 0; i<M.length;i++){
CreateLine(this.x,this.y,M[i][1],M[i][2],M[i][3],M[i][4],M[i]    [5],this.size,M[i][6])
}