Untitled

<html>
<head>
<title>Home</title>
<style>
</style>
</head>
<script>
var loadUp=0;
function loader(){
    loadUp+=1;
    if (loadUp===17){
        var seed=Math.floor(Math.random()*10000);
        document.getElementById("load").innerHTML="Loaded"+"<br/>"+"Seed:"+" "+seed;
        canvas();
    }
}


var blocks=["dirt","cactus","carvedSandstone","crackedStoneBrick","diamondOre","furnace","goldOre","grass","lapisOre","leaves","log1","sand","stone","stoneBrick","stoneMoss","woodOak"];

function canvas(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var dirt=document.getElementById("dirt");
var cactus=document.getElementById("cactus");
var carvedSandstone=document.getElementById("carvedSandstone");
var crackedStoneBrick=document.getElementById("crackedStoneBrick");
var diamondOre=document.getElementById("diamondOre");
var furnace=document.getElementById("furnace");
var goldOre=document.getElementById("goldOre");
var grass=document.getElementById("grass");
var lapisOre=document.getElementById("lapisOre");
var leaves=document.getElementById("leaves");
var log1=document.getElementById("log1");
var sand=document.getElementById("sand");
var stone=document.getElementById("stone");
var stoneBrick=document.getElementById("stoneBrick");
var stoneMoss=document.getElementById("stoneMoss");
var woodOak=document.getElementById("woodOak");
var block=document.getElementById(blocks[1]);
ctx.drawImage(block,0,0);
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);


}

}
console.log(blocks[0]);

</script>
<body onLoad="loader();">
<p>
  <canvas id="myCanvas" width="1000" height="200" style="border:1px solid #000">Your browser does not support canvas.</canvas>
  <br>

<p><img src="Images/dirt.png" width="0" height="0" alt="" id="dirt" onload="loader();"></p>
<p><img src="Images/furnace_front.png" name="furnace" width="0" height="0" id="furnace" onload="loader();"></p>
<p><img src="Images/grass_side.png" name="grass" width="0" height="0" id="grass" onload="loader();"></p>
<p><img src="Images/oreDiamond.png" name="diamondOre" width="0" height="0" id="diamondOre" onload="loader();"></p>
<p><img src="Images/oreGold.png" name="goldOre" width="0" height="0" id="goldOre" onload="loader();"></p>
<p><img src="Images/leaves (2).png" name="leaves" width="0" height="0" id="leaves" onload="loader();"></p>
<p><img src="Images/oreLapis.png" name="lapisOre" width="0" height="0" id="lapisOre" onload="loader();"></p>
<p><img src="Images/sand.png" name="sand" width="0" height="0" id="sand" onload="loader();"></p>
<p><img src="Images/sandstone_carved.png" name="carvedSandstone" width="0" height="0" id="carvedSandstone" onload="loader();"></p>
<p><img src="Images/stone.png" name="stone" width="0" height="0" id="stone" onload="loader();"></p>
<p><img src="Images/stonebricksmooth.png" name="stoneBrick" width="0" height="0" id="stoneBrick" onload="loader();"></p>
<p><img src="Images/stonebricksmooth_cracked.png" name="crackedStoneBrick" width="0" height="0" id="crackedStoneBrick" onload="loader();"></p>
<p><img src="Images/stoneMoss.png" name="stoneMoss" width="0" height="0" id="stoneMoss" onload="loader();"></p>
<p><img src="Images/tree_side.png" name="log1" width="0" height="0" id="log" onload="loader();"></p>
<p><img src="Images/wood.png" name="woodOak" width="0" height="0" id="woodOak" onload="loader();"></p>
<p><img src="Images/cactus_side.png" name="cactus" width="0" height="0" id="Cactus" onload="loader();"></p>
<p id="load">&nbsp;</p>
</body>
</html>