javascript - Why is my canvas only loading the images in the top left corner? -


i trying make program make video game maps. worked fine before, added variable, pixelwideandtall, automatically set width , height of canvas, , load images in top left corner. want know why happening , how fix it. if need see it, you'll have copy , paste code whichever text editor use. post picture, reputation isn't high enough. thanks!

<html> <head> <title></title> <script> window.onload = function () {     var canvas = document.getelementbyid('paper');     var c = canvas.getcontext('2d');     var posx=0;                                                   //all of variables     var posy=0;      var pixelwideandtall = prompt('how wide , tall want each picture be? make sure it\'s number, please!');     while(isnan(pixelwideandtall)){         pixelwideandtall = prompt('alright, put in number time.');     }     var map = [     [0,0,1,0,0],       //map     [0,0,1,0,0],     [1,1,1,1,1],     [0,0,1,0,0],     [0,0,1,0,0]];     canvas.height = map.length * pixelwideandtall;     canvas.width = map[0].length * pixelwideandtall;      //now pictures!      var grass = new image();     grass.src='https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/v/t1.0-9/10252096_483877768405708_6915128458002047622_n.jpg?oh=0dd45ac8392b31dd89da67f2b74e0eef&oe=53abdb2a&__gda__=1404253465_7ee03498efb21d7759862a3268769775';     var sand = new image();     sand.src='https://scontent-b-sea.xx.fbcdn.net/hphotos-prn2/t1.0-9/10169458_483877771739041_423139715070437533_n.jpg';     var loga = new image();     loga.src='https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-frc1/t1.0-9/10014648_483877575072394_6204441713213423736_n.jpg';     var logb = new image();     logb.src='https://scontent-a-sea.xx.fbcdn.net/hphotos-frc1/t1.0-9/10247323_483877578405727_3664131849980667819_n.jpg';      for(var i=0;i<map.length;i++){         for(var j=0;j<map[i].length;j++){             switch(map[i][j]){                 case 0:                     c.drawimage(grass,posx,posy,pixelwideandtall,pixelwideandtall);                     break;                 case 1:                     c.drawimage(sand,posx,posy,pixelwideandtall,pixelwideandtall);                      /*loops through every spot of array. based on what's                      in particular index, draws picture. */                           break;                                                                                                           case 2:                     c.drawimage(loga,posx,posy,pixelwideandtall,pixelwideandtall);                     break;                 case 3:                     c.drawimage(logb,posx,posy,pixelwideandtall,pixelwideandtall);                     break;                 default:                     alert('you must have put in input isn\'t supported yet. please fix!');                     break;             }             posx+=pixelwideandtall;         }         posx=0;         posy+=pixelwideandtall;     } } </script> <style> #paper{     border:3px solid black; } p{     font-size:6px; } </style> </head> <body>                                                                       <!-- in case... --> <canvas id='paper' height = 0 width = 0>your browser not support html5 canvas element. either try different browser, or give up.</canvas> <p>you <strong><em>may</em></strong> need refresh few times image load. thank you!</p> </body> </html>

it's because pixelwideandtall variable string when returned prompt.

it converted number when multiply used why works line:

canvas.height = map.length * pixelwideandtall;

but not when adding - happening value concatenated string instead @ plus operator posx etc. in loop.

to fix force number right away:

var pixelwideandtall = prompt('...'); while(isnan(pixelwideandtall)){     pixelwideandtall = prompt('alright, put in number time.'); }  pixelwideandtall *= 1;  // force number

optionally:

pixelwideandtall = parseint(pixelwideandtall, 10);

fiddle here

ps: should consider implementing image loader images.


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more