Solution:How to make canvas 100% of browser window
Monkey Targets Forums/HTML5/Solution:How to make canvas 100% of browser window
| ||
I tried using CSS to make the GameCanvas object 100% of the browser window size, however I failed to make it work. I added the following tag to the CSS section of MonkeyGame.html #GameCanvas { height: 100%; width: 100%; border: 1px solid black; } I modified the following line of MonkeyGame.html as follows: <canvas id="GameCanvas" onclick="javascript:this.focus();" tabindex=1></canvas><br> The result was a blank screen. I'm curious to know why this didn't work (although I'm admittedly not very skilled in HTML5). I did manage to achieve the effect via a simple modification to main.js (in the window.onload function at the very top of the file) I added the following lines after line 27, which reads game_console=document.getElementById( "GameConsole": //add the following two lines for a full-window game canvas game_canvas.width=window.innerWidth; game_canvas.height=window.innerHeight; I'm interested to hear if anyone else has a better way of doing this. |
| ||
Try this:#GameCanvas { position:absolute; width: 100%; height: 100%; } Edit: and of course you should set RESIZEABLE_CANVAS=true on line 4 of main.js |
| ||
Thank you Warpy - this is a much better way. Being able to resize the canvas in real time is excellent. |
| ||
Alternatively I did this in my game: Replace the top part of the main.js with this : //Change this to true for a stretchy canvas! // var RESIZEABLE_CANVAS=true; //Start us up! // function doResize() { var canvas = game_canvas; canvas=document.getElementById( "GameCanvas" ); var screenHeight = window.innerHeight; var screenWidth = window.innerWidth; if (screenWidth*3/4 < screenHeight) { screenHeight = Math.floor(screenWidth*3/4); } else { screenWidth = Math.floor(screenHeight*4/3); } canvas.style.height = screenHeight; canvas.style.width = screenWidth; canvas.style.marginLeft = (window.innerWidth-screenWidth)/2; canvas.style.marginTop = Math.floor((window.innerHeight-screenHeight)/2); } window.onload=function( e ){ game_canvas=document.getElementById( "GameCanvas" ); game_console=document.getElementById( "GameConsole" ); if( RESIZEABLE_CANVAS ){ window.onresize=function() { doResize(); }; } doResize(); try{ bbInit(); bbMain(); }catch( ex ){ if( ex ) alert( ex ); return; } if( game_runner!=null ){ game_runner(); } } //Globals and then in the html file remove the : <!DOCTYPE html> at the top of the file. This makes the assumption the game runs in a 4:3 window and will resize to fill the window while keeping the aspect ratio and centre it. |