Issues with Canvas

Question

I'm doing some testing with the HTML5 Canvas. I'm trying to draw an array of images in the canvas using a for loop:

var blocks=["dirt","cactus","carvedSandstone","crackedStoneBrick","diamondOre","furnace","goldOre","grass","lapisOre","leaves","log1","sand","stone","stoneBrick","stoneMoss","woodOak"];
 for(var i;i<=blocks.length;i++){
  var id=document.getElementById(blocks[i]);
  var x=i*32;
  var y=0;
    if(x>=1000){
      y+=32;
   }
   ctx.drawImage(block,x,y);

The above code is an array of the different images I want to draw followed by a for loop which(in theory) is supposed to draw each item in the array with an X value= to the number of times the for has gone through *32. The if statement is just there to make a new row once the width is exceeded. For all intents and purposes, the canvas is set up correctly. If the above code is removed and replaced with the following code, the image intended is drawn correctly.

dirt=document.getElementById("dirt");
ctx.drawImage(dirt,0,0);

If I'm being vague if you have any questions, please let me know.

Full Code

Answer 1

var id=document.getElementById(blocks[i]); should be var block=document.getElementById(blocks[i]);, no?