javascript - putImageData を使用するときにループを正しく使用していません

Question

ファイルから rgb 値を読み取り、それらをキャンバスに配置しようとしています。

ループとインクリメント値のさまざまなバリエーションを試しました。

JavaScript:

function parseData(data) {
   var pixel_array = data.split('|');
   // Loop through pixel data from file
   for (i = 0; i < pixel_array.length; i += 4) {
         var [r, g, b] = pixel_array[i].split(',');
         imgData.data[i + 0] = r;
         imgData.data[i + 1] = g;
         imgData.data[i + 2] = b;
         imgData.data[i + 3] = 255;
   }
   ctx.putImageData(imgData, 0, 0);
};

データ形式の例:

var data='84,133,165|84,133,165|85,133,165|86,135,167|87,136,168|88,137,169|89,138|'

キャンバスに RGB 値を取得していますが、希望するサイズの 1/4 です。変数の rgb 値の正確なレプリカが必要です。