arrays - Why won't my images draw instantly? HTML5 canvas -

arrays - Why won't my images draw instantly? HTML5 canvas -

so, here's code

function drawlocations(){ var = 2; var storeddata = sessionstorage.locations; locations = json.parse(storeddata); while(i<25){ var img = new image(); img.src = locations[i]; ctx.drawimage(img,i*20,canvas.height-40); i++; } }

when print sessionstorage.locations variable in console prints array looks this...

["","","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png","spike.png"]

which supposed do. stringified array json storing array in sessionstorage not problem. problem when run code take 30 seconds draw spikes on screen. have no thought what's going on.

you not giving images time load before trying drawimage them.

you must utilize .onload gets called after image has loaded.

here's illustration using image.onload: http://jsfiddle.net/m1erickson/yjs2l/

var img=new image(); img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/picketfence.jpg"; function start(){ for(var i=0;i<3;i++){ ctx.drawimage(img,i*99,canvas.height-img.height); } }

arrays html5 image loops canvas