Rescale HTML5 canvas to match browser window
Monkey Forums/Monkey Code/Rescale HTML5 canvas to match browser window
| ||
Javascript:function rescale() { var canvas = GameCanvas; canvas.width = window.innerWidth; canvas.height = window.innerHeight; return window.innerHeight; } Monkey: Method OnRender () local GameScale:Float = rescale() / 480.0 PushMatrix Scale GameScale,GameScale 'Your drawing code goes here PopMatrix End Method Demo at http://earok.net/games/hoi/html5/fullscreen.html Apologies if this has already been posted somewhere. |
| ||
Nice, this could be used as a Javascript SetGraphics command too:function rescale(w, h) { var canvas = GameCanvas; canvas.width = w; canvas.height = h; return window.innerHeight; } |
| ||
Ah, I didn't even think about using it that way. That's cool! Edit - Dwelling on it further, if it's possible to mimic SetGraphics in HTML5, maybe it's possible to do it on most of the other platforms. Might be a nice addition for your Diddy libs ;) |
| ||
Might be a nice addition for your Diddy libs ;) Great minds, eh ;) http://code.google.com/p/diddy/source/detail?r=205 Found a way to do it for Android, but need access to an internal object: http://www.monkeycoder.co.nz/Community/posts.php?topic=1158 |
| ||
Cool, but that Demo bombs out on FireFox 4, OS X 10.6 with ReferenceError: GameCanvas is not defined D:/Projects/Game/SVN/HOI/Monkey/hoi.monkey<309> D:/Toolbox/Programming/monkeydev/modules/mojo/app.monkey<72> D:/Toolbox/Programming/monkeydev/modules/mojo/app.monkey<55> Chrome and Safari are fine. |
| ||
Same error on firefox 5 on OSX. In Chrome that looks great :) |
| ||
You donīt have to use an extra JS file for this. Just check this out: GameCanvas isnīt defined because the name of the var is game_canvas. Mfg Suco |
| ||
Thanks Suco-X, that seems to do the trick: A little test: |
| ||
You can fix the Firefox issue by doing this:function rescale() { var canvas = document.getElementById( "GameCanvas" ); canvas.width = w; canvas.height = h; return window.innerHeight; } |