Any way to make the html5 get all available size?

Monkey Targets Forums/HTML5/Any way to make the html5 get all available size?

ziggy

(Posted 2012) [#1]

In the same way a glfw app can be full screen, is there any way to make an html5 application get the 100% of the available navigator space? If you set the canvas width and hegight to 100% it gets scaled, I want to resize the canvas but not scaling it or deforming it, any way to do this?

impixi

(Posted 2012) [#2]

There is a Fullscreen API in development, but browser support is sketchy.

At the moment, the following is about as close to full screen as you can get in standard HTML5. It works for me in IE9 without any scaling issues. (NON-debug build)

resizecanvasfull.js

window.onresize = ResizeCanvasFull;

function ResizeCanvasFull()
{

	var canvas = document.getElementById("GameCanvas");
	if (canvas)
	{
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}

}

resizefulltest.monkey

Strict

Import mojo
Import "resizecanvasfull.js"

Extern

Function ResizeCanvasFull:Void()

Public

Function Main:Int()

	New MyApp

	Return 0
End


Class MyApp Extends App

	
	Field testImage:Image


	Method OnCreate:Int()
	
		ResizeCanvasFull()
		
		testImage = LoadImage("test.png")
		
		SetUpdateRate 60
		Return 0
	End


	Method OnRender:Int()
		Cls 0, 0, 0

		If testImage Then DrawImage testImage, 10, 10

		DrawText MouseX() + ", " + MouseY(), 10, DeviceHeight() - 30
		
		Return 0
	End


End

DruggedBunny

(Posted 2012) [#3]

Just to clarify, do you mean you want DeviceWidth/Height return the 'current' canvas size when it's scaled to 100% of the available browser area, even when the user resizes the browser window? That could be useful, perhaps requested via a CONFIG setting. (Otherwise I was going to suggest AutoFit if it was just a problem with aspect ratios.)

ziggy

(Posted 2012) [#4]

I want it to behave like GLFW full screen, so I can make a mojo application that gets all the available navigator space without being scaled, just making the DeviceWidth and DeviceHeight bigger. I mean, if we can have this scalable on GLFW, and mojo can handle this, it would be absolutely great to allow this too on html5. A full multimedia website writen in monkey/mojo could be great, and I would really like to provide some gui samples for junglegui in a sort of "browser fullscreen" mode, as I think it would look a lot cooler. Also, there's no reason for some games to be tied to a specific given browsing size.

impixi

(Posted 2012) [#5]

Unless I misunderstand you, the code I posted above does that, in IE9 at least. Tell your users to press F11 (if they're using a PC), and there you go, full screen canvas. The canvas resizes when the window is resized. DeviceWidth and DeviceHeight return the correct dimensions of the 100% viewable area canvas. Nothing is rescaled: you're just working with a larger coordinate space. Is that not what you need?

ziggy

(Posted 2012) [#6]

Yes impixi! thanks!! Testing it now...

ziggy

(Posted 2012) [#7]

Thanks, it's working like a charm

http://www.jungleide.com/samples/junglegui01/

BlackD

(Posted 2012) [#8]

Heh, I've been doing the same thing in the HTML instead.

<body onpageshow="resize();" onresize="resize();">

...

<script language="javascript" src="main.js">Javascript not supported!</script>
<script type="text/javascript">
function resize()
{
GameCanvas.width=window.innerWidth;
GameCanvas.height=window.innerHeight;
}
</script>
</body>

Problem is I can't find any way to force IE10 to execute a function on the page on load. Tried onload, onfocus, onhaschange, onpageshow, etc. They all work fine in Firefox.

Of course, using impixi's code instead, you can just call the function as soon as the program starts. The only advantage my change would bring is it still working if your program hangs, at which stage the size of the window isn't your biggest problem anyway.. :)

edit: Well, can fix the IE10 problem just by adding a single script in addition to the resize script.

<script type="text/javascript">
GameCanvas.width=window.innerWidth;
GameCanvas.height=window.innerHeight;
</script>

Raph	(Posted 2014) [#9]

Anyone got this same functionality implemented for Flash, by any chance?