twobomb

var str = 'Текст, текст, текст, текст, текст, текст';
var p = document.querySelector('p');
var str_arr = str.split(',');
var i = 0;
var colors = ['red', 'green', 'black', 'yellow', 'green', 'orange', 'gray']; //массив цветов
p.innerHTML = str_arr[0]; 
setInterval(function(){ 
  p.style.color = colors[i];
  i = (i+1)%colors.length;
}, 1000);

Накидал пример через getImageData, putImageData.
P.S. Если будете рендерить изображения, они должны быть на вашем домене чтобы не столкнуться с проблемой Access-Control-Allow-Origin

Если игра только мультиплеерная, то подключайте сразу node.js и разрабатывайте и тестируйте все на ходу. Ну тут моментов куча, это и сложность игры и безопасность (защита от читеров). Я например когда то делал на canvas + node.js игру типа agar.io. Так вот весь игровой цикл у меня крутился на сервере, тоесть спавн шаров, перемещения игроков и прочие действия которые просто слались всем броадкастом. А пользователь мог только отослать свой ник при входе, и во время игры постоянно шлет свой угол между шаром и мышью (вектор движения). Таким образом пользователь не может модифицировать ни скорость ни размер шара, потому-что на клиентской части идет просто отрисовка того что присылает сервер, координат , размеров..

В строке ?

var a = "0.000000009000000000";
a = a.replace(/0*$/,"");

<?PHP
$tmp = array_chunk($service_list,3);
foreach($tmp as $k => $v){
	echo '<ul class="service_list">';
 foreach($v as $row => $list_items)
   echo "<li>$list_items[item] </li>";
  echo '</ul>';
}
?>

Тип такого

function iRead(item, options) { 
....
  this._events_read = [];
  this._events_unread = [];
  this.on = function(evt,func){
    switch(evt){
      case "newsRead":
        this._events_read.push(func);
      break;
      
      case "newsUnread":
        this._events_unread.push(func);
      break;
    }
  }
}

iRead.prototype.read = function() {
 this.item.addClass('read');
 this._events_read.map(function(e){e();});
};

iRead.prototype.unread = function() {
 this.item.removeClass('read');
 this._events_unread.map(function(e){e();});
};

var s = new iRead();
s.on("newsRead",function(){alert("readed!")});
s.on("newsUnread",function(){alert("unreaded!")});
s.read();//readed
s.unread();//unreaded

Типа такого, только понастраивать нужно.

Можно так

Может я чето не правильно понял, но вот мой вариант решения. Тоесть мы можем просматривать график, рисуем только его часть. Для теста также забил массив на 30к элементов, ничего не лагает все норм пробовал даже лям, впринципе любое значение будет норм так как он работает только с несколькими без перебора всего массива.

https://codepen.io/anon/pen/zWmgmZ

https://jsfiddle.net/twobomb/co3ep87y/73/

<form action="test" data-action="test">
  <button>ok</button>
</form>

$(document).ready(function(){
			$('form').submit(function(event){ 
				event.preventDefault(); 
				$action = $(this).data('action');
				new Core()[$action]();//test
			});
		});
    
class Core {

  test() {
    alert("test");
  }

}

Можно так

Мож так