Full Screen Tutorial
Sometimes you just want your canvas to fit the viewport of the browser.
It means 3 things:
- You have to know the current size of the browser
- You have to change the size of the canvas and inform the framework
- May be you don't want to see the scrollbars that appear on the browser
How to get the current size of the viewport ?
cgSceneGraph comes with a lot of useful functions. To get a list of all functions, you
can
take a look at the "API
DOCS"
page.
All these functions have their name beginning with "cgsg" (in lowercase. "CGSG" in uppercase
is
reserved for the classes of the framework).
The function interesting here is "cgsgGetRealViewportDimension()"
that returns a CGSGDimension object.
Example:
var viewDimension = cgsgGetRealViewportDimension();
How to change the size of the canvas ?
When modifying the size of the canvas, you need to inform the framework about the new size.Fortunately, the CGSGScene provides a method to change the current size of the canvas : "setCanvasDimension(newCGSGDimension)".
The parameter is a CGSGDimension Object
Example:
//this code can be executed in the main class that inherit from CGSGScene
var viewDimension = cgsgGetRealViewportDimension();
//update the canvas size and the framework in 1 call
this.setCanvasDimension(viewDimension);
How to hide the scrollbars on the browser ?
Some browsers will display the scrollbars if the canvas take 100% of width and height.It can be very annoying and the framework won't do anything for you, it's a CSS matter and the "overflow" property of the html tag will correct this for you.
Example:
html {
margin: 0;
padding: 0;
overflow: hidden;
}