javascript - cant get canvas to display anything -
im trying draw tiles canvas followed tutorial, made sure images in same directory , cant see why isnt working tutorial. can please see error im failing see, driving me wall.
<!doctype html> <html> <head> <meta charset="utf-8"> <title> rpg </title> <link rel="stylesheet" type="text/css" href="main.css"> <!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"> </script> <script type="text/javascript" src="main.js"></script>--> </head> <body> <canvas id="canvas" height="900px" width="900px"></canvas> <script> var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d'); var map_array = [ [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,1,1,1,1,1,1,1,0,0], [0,0,0,1,1,1,1,1,1,1,0,0], [0,0,0,1,1,0,0,0,1,1,0,0], [0,0,0,1,1,0,0,0,1,1,0,0], [0,0,0,1,1,0,0,0,1,1,0,0] ]; var grass=new image(); var dirt=new image(); grass.src='grass.png'; dirt.src='dirt.png'; var posx = 0; var posy = 0; for(i = 0; < map_array.length; i++){ for(j = 0; j < map_array[i].length; j++){ if(map_array[i][j] == 0){ context.drawimage(grass, posx, posy, 75,75); } if(map_array[i][j] == 1){ context.drawimage(dirt, posx, posy, 75,75); } posx+=75; } posx = 0; posy+=75; } </script> </body> </html>
please check console, mentioned in comments images not loading, because changed src of images , working expected.
here jsfiddle check it.
code
<canvas id="canvas" height="900px" width="900px"></canvas> <script> var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d'); var map_array = [ [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,0,0,0,0,0,1,1,0,0], [0,0,0,1,1,1,1,1,1,1,0,0], [0,0,0,1,1,1,1,1,1,1,0,0], [0,0,0,1,1,0,0,0,1,1,0,0], [0,0,0,1,1,0,0,0,1,1,0,0], [0,0,0,1,1,0,0,0,1,1,0,0] ]; var grass=new image(); var dirt=new image(); grass.src='http://i.imgur.com/tl6nw.gif'; dirt.src='http://i.imgur.com/bfz5f.gif'; var posx = 0; var posy = 0; for(i = 0; < map_array.length; i++){ for(j = 0; j < map_array[i].length; j++){ if(map_array[i][j] == 0){ context.drawimage(grass, posx, posy, 75,75); } if(map_array[i][j] == 1){ context.drawimage(dirt, posx, posy, 75,75); } posx+=75; } posx = 0; posy+=75; } </script> 
Comments
Post a Comment