JavaScript empty array
<p><a href="http://stackoverflow.com/a/1234337/1690081">http://stackoverflow.com/a/1234337/1690081</a></p>

<p>shows that <code>array.length = 0;</code>will empty array but in my code it doesn't</p>

<p>here's an sample:</p>

<pre><code>window.onload = draw;
window.onload = getFiles;
var namelist = [];
function draw(){
    // assing our canvas to element to a variable
    var canvas = document.getElementById("canvas1");
    // create html5 context object to enable draw methods
    var ctx = canvas.getContext('2d');

    var x = 10; // picture start cordinate
    var y = 10; // -------||---------
    var buffer = 10; // space between pictures
    for (i=0; i&lt;namelist.length; i++){
        console.log(namelist[i])
        var image = document.createElement('img');
        image.src = namelist[i];
        canvas.appendChild(image);
        ctx.drawImage(image,x,y,50,50);
        x+=50+buffer;
    }
}
function getFiles(){
    namelist.length = 0;// empty name list
    var picturesFiles = document.getElementById('pictures')
    picturesFiles.addEventListener('change', function(event){
        var files = picturesFiles.files;

        for (i=0; i&lt; files.length; i++){
            namelist.push(files[i].name);
            console.log(namelist)
        }
        draw();
    }, false);

}
</code></pre>

<p>after i call <code>getFiles()</code> second time. It doesn't remove the previous list, just appends to it. any idea why?</p>
