Rescale HTML5 canvas to match browser window

Monkey Forums/Monkey Code/Rescale HTML5 canvas to match browser window

Earok

(Posted 2011) [#1]

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.

therevills

(Posted 2011) [#2]

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;
}

Earok

(Posted 2011) [#3]

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 ;)

therevills

(Posted 2011) [#4]

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

Difference

(Posted 2011) [#5]

Demo at http://earok.net/games/hoi/html5/fullscreen.html

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.

Shinkiro1

(Posted 2011) [#6]

Same error on firefox 5 on OSX.
In Chrome that looks great :)

Suco-X

(Posted 2011) [#7]

You don´t have to use an extra JS file for this. Just check this out:

Import dom

Extern 
	'Acces to the game_canvas var
	Global game_canvas:HTMLCanvasElement
	
	'Dom module isn´t complete. This two fields aren´t in the window class. They should.
	Global windowWidth:Int  = "window.innerWidth"
	Global windowHeight:Int = "window.innerHeight"
Public

Function Main()
	' Just to check out
	Print game_canvas.width
	Print game_canvas.height
	Print windowWidth
	Print windowHeight
End

GameCanvas isn´t defined because the name of the var is game_canvas.

Mfg Suco

Difference

(Posted 2011) [#8]

Thanks Suco-X, that seems to do the trick:

A little test:

' dynamicly resize the canvas
Import dom
Import mojo

Extern 
	'Acces to the game_canvas var
	Global game_canvas:HTMLCanvasElement
	
	'Dom module isn´t complete. This two fields aren´t in the window class. They should.
	Global windowWidth:Int  = "window.innerWidth"
	Global windowHeight:Int = "window.innerHeight"
Public

Class Test Extends App


	Method OnCreate()
		SetUpdateRate 60
	End
	
	
	Method OnUpdate()
	
		If game_canvas.width <> windowWidth
			game_canvas.width = windowWidth
		Endif
		
		If game_canvas.height <> windowHeight
			game_canvas.height= windowHeight
		Endif
	
	End Method
		
	Method OnRender()

		Cls 255,128,0
		
		PushMatrix
		
		Scale DeviceWidth/640.0,DeviceHeight/480.0

		SetColor 255,255,255
		DrawText "The Quick Brown Fox Jumps Over The Lazy Dog",320,240,.5,.5
		
		PopMatrix
		
		SetScissor 0,0,DeviceWidth,DeviceHeight
		SetColor 255,0,0
		DrawRect 0,0,DeviceWidth,1
		DrawRect DeviceWidth-1,0,1,DeviceHeight
		DrawRect 0,DeviceHeight-1,DeviceWidth,1
		DrawRect 0,0,1,DeviceHeight-1
			
	End

End


Function Main()
	New Test
End

therevills

(Posted 2011) [#9]

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;
}