имя динамической переменной javascript с canvas

Question

Я посмотрел другие примеры, показывающие, как поместить имя переменной в массив. Когда я делаю это, цикл в моей функции выдает ошибку.

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

Переменная, которую я пытаюсь сделать динамической, это pic, я пытался использовать var pic = []; над первым циклом for, а затем при каждом вызове, который я использовал pic[i] = new Image(); pic[i].src = ... и далее ...
Я получаю ошибку, когда использую переменную в третьем цикле for

for(var iii = 0, pic[i]; pic[i] = pics[iii++];) {
   ctx.drawImage(pic, 60, 270);

Ошибка на первом pic[i] в третьем for вызове

Uncaught SyntaxError: Unexpected token [

Вот код

        // For every player run iteration
        var pic = [];
        for (var i = 0; i < item.length; ++i) {
            // Position for players on account screen
            if(i == 0){ var pos = "61px";}
            if(i == 1){ var pos = "168px";}
            if(i == 2){ var pos = "275px";}

            // Gets player name from string
            var player = item[i].match( /([A-Z])\w+/g );

            // Create player div for mouse interaction
            var player_el = $('<div class="cursor player" id="player'+ player +'"></div>');
            $("#can_wrapper").append(player_el);
            $("#player"+ player).css({"position": "absolute", "height": "50px", "width": "50px", "left": ""+ pos +"", "top": "271px", "cursor": "grab", "cursor": "-webkit-grab"});

            // Get player name for hover action
            var player_name_el = player;
            document.styleSheets[0].addRule('#player'+ player +':hover::after','content: "'+player_name_el+'";');

            // Player image URLs
            var urls = ['v1456.png', 'vbody0.png','vhead14.png','v1960.png','v578.png','v1221.png', 'v3063.png']; // url and order
            var pics = [];                            // holds the image elements                 
            var count = urls.length;                  // number of images to load

            // For every image run iteration
            for(var ii = 0, url; url = urls[ii++];) {   // share onload handler
                pic[i] = new Image();                // create a new image
                pics.push(pic);                       // store in array
                pic[i].onload = loadCounter;             // set load handler (also add for error)
                pic[i].src = 'https://www.example.com/interface/images/body/' + url; // set url to start loading
            }

            // Load images in the order they were called
            function loadCounter() {
                count--;
                if (!count) {                         // when done we can draw the images in order:
                    for(var iii = 0, pic[i]; pic[i] = pics[iii++];) {
                        ctx.drawImage(pic[i], 60, 270);
                    }
                }
            };

        }