How to create a lot of rectangle with create pattern in for loop?(For audio visualization)

I did an audio visualizer.I want to put pattern all rectangle(stick). I write this code it's working but for just one stick. I want to do all of them. How can I do or where am I wrong. my code is down and screenshot.I create a canvas and i get mp3 files then i connect visualizer. myfiddle

      <script>
          window.onload = function() {
            var file = document.getElementById("thefile");
            var audio = document.getElementById("audio");
            file.onchange = function() {
                var files = this.files;
                audio.src = URL.createObjectURL(files[0]);
                audio.load();
                audio.play();
                var context = new AudioContext();
                var src = context.createMediaElementSource(audio);
                var analyser = context.createAnalyser();
                var canvas = document.getElementById("canvas");
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                var ctx = canvas.getContext("2d");
                var cty = canvas.getContext("2d");
                src.connect(analyser);
                analyser.connect(context.destination);
                analyser.fftSize = 256;
                var bufferLength = analyser.frequencyBinCount;
                var dataArray = new Uint8Array(bufferLength);
                var WIDTH = canvas.width;
                var HEIGHT = canvas.height;
                var barWidth = (WIDTH / bufferLength) * 1.5;
                var barHeight;
                var x = 0;
                console.log(HEIGHT);
                function renderFrame() {
                    requestAnimationFrame(renderFrame);
                    x = 0;
                    analyser.getByteFrequencyData(dataArray);
                    ctx.fillStyle = "#FFF";
                    cty.fillStyle = "#fff";
                    ctx.fillRect(0, 0, WIDTH, HEIGHT);
                    cty.fillRect(0, 0, WIDTH, HEIGHT);
                    var img=document.createElement('img');
                    img.src='https://us.v-cdn.net/5019960/uploads/userpics/137/pI3NN6QC5E7DE.png';
                    for (var i = 0; i < bufferLength; i++) {
                        barHeight = dataArray[i];
                        var r = barHeight + (25 * (i/bufferLength));
                        var g = 250 * (i/bufferLength);
                        var b = 50;
                        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
                        ctx.fillRect(x, HEIGHT-barHeight, barWidth, barHeight);
                        var pat=cty.createPattern(img,'repeat-y');
                        cty.fillStyle = pat;
                        cty.fillRect(x, HEIGHT-barHeight, barWidth, barHeight);
                        x += barWidth + 10;
                    }
                }
                audio.play();
                renderFrame();
            };
        };
      </script>