Скорость рендера в canvas
 

Все приветы.
Для отрисовки картинок создаю теги img и храню все данные об элементе в одном массиве. Ускорит ли работу если хранить это в теге канваса, или можно как то по лучше сохранить картинку что бы потом ее можно было быстро использовать в канвасе.

для тех кому нужен код:

функция перевода объекта анимации с записыванием в массив

function createNewEventObject(nameObject, nameEvent, Event) {
		
		var elem = arrayObject[nameObject][nameEvent];
		
		//Запись параметров перемещения объекта
		for (var o in Event) {
			
			if (typeof Event[o] == 'object' && Event[o] != null) {
				
				elem[o] = new Object();
				
				//Если значение является объектом тогда проходимся циклом по нему
				for (var a in Event[o]) { 
					
					if (typeof Event[o][a] == 'string' && Event[o][a].indexOf('src') != -1) {
						
						var img = new Image();		// Замена на img так как canvas не работает с урами
						img.src = Event[o][a];
						elem[o][a] = img;
						
					} else if (typeof Event[o][a] == 'object') {
							
						//создаем дополнительное вложение
						elem[o][a] = new Object();
						
						for (var i in Event[o][a]) {
							
							//Снова делаем проверку на то нужно ли создавать img
							if (Event[o][a][i].indexOf('src') != -1) {
								
								var img = new Image();		// Замена на img так как canvas не работает с урами
								img.src = Event[o][a][i];
								elem[o][a][i] = img;
								
							} else {
							
								elem[o][a][i] = Event[o][a][i];
								
							}
							
						}
						
					} else {
						
						elem[o][a] = Event[o][a];
						
					}
					
				}
				
			} else {
			
				elem[o] = Event[o];
				
			}
			
		}
		
	}

ну а руссую на canvas вот так

ctxMan.drawImage(
                directions,     				 	//Объект Image анимации 
                Math.round(elemEvent.fw * step), 	//Берем текущий кадр, ширина кадра * шаг 
                0,                               	//Кадры идут один за другим, тут 0
                elemEvent.w,                     	//Вырез в ширину объекта
                elemEvent.h,                     	//И в высоту
                elemPosition.x+shiftX,              //Размещаем по горизонтали на холсте
                elemPosition.y+shiftY,              //И по вертикали
                elemEvent.w,                     	//Ширина как у кадра
                elemEvent.h                      	//Ну и высота
            );

А Вы к этой функции createNewEventObject один раз при загрузке обращаетесь или постоянно?
Картинка главное что сохраняется в кэше браузера и после загрзки в канвас быстро вставляется
А где хранить ссылку на картинку все равно

конечно один раз, работа идет только с массивами которые она создает.
Просто если будет много разных элементов то отдать какой либо JSON, будет удобней править и понимать что происходить. нежели писать все это в массивах которые отвечают за какие то параметры объекта который нужно изобразить на канвасе

каким боком кеш браузера к объектам яваскрипт?
в канву вставляется объект имидж,какой создаётся- new Image().
кеш важен только при создании объекта .
розовый слоник,
1 ты не проверяешь полную загрузку в new Image() -через онлоад- легко возникнет ситуация-вставляешь изображение в канву,а ничего не меняется
2 при большом количестве new Image() -браузер начинает ложится
так что вопрос скорости -только экспериментально и индивидуально

это я тоже понимаю, просто когда начал делать сделал на img, теперь вот подумываю о том что это не верное решение и ищу альтернативу. читал что можно делать через скрытый элемент canvas но это посути выйдет тоже самое как и с img.

вобщем смотри как можно сделать.
загнать всё в кеш браузера- невидимые изображения и отслеживать их загрузку,и так последовательно для всех изображений.-на всё один тег img
Соответственно можно использовать один new Image() для последующей работы с канвой -будет грузится в него быстро,поскольку изображения закешированны браузером.
Т.е сначала кешируем,потом как все закешировали начинаем работать с ними.Естественно что при последующих входах уже изображения будут в кеше
количество <img> и new Image() можно подобрать индивидуально. от того что их будет по 10 -ничего страшного не будет а скорость при первой загрузке/при работе с канвой может подняться в разы-зависит от задачи