The stage where all the DOM entities will be placed.



Back to top


public void Crafty.viewport.init([Number width, Number height][, String stage_elem])
public void Crafty.viewport.init([Number width, Number height][, HTMLElement stage_elem])
Number width

Width of the viewport

Number height

Height of the viewport

String or HTMLElement stage_elem

the element to use as the stage (either its id or the actual element).

Initialize the viewport. If the arguments 'width' or 'height' are missing, use window.innerWidth and window.innerHeight (full screen model). The argument 'stage_elem' is used to specify a stage element other than the default, and can be either a string or an HTMLElement. If a string is provided, it will look for an element with that id and, if none exists, create a div. If an HTMLElement is provided, that is used directly. Omitting this argument is the same as passing an id of 'cr-stage'.

Usually you don't have to initialize the viewport by yourself, it's automatically initialized by calling Crafty.init(). Multiple inits will create redundant stage elements. Use Crafty.viewport.width, Crafty.viewport.height or Crafty.viewport.reload to adjust the current viewport's dimensions.

Back to top


The #cr-stage div element.

Back to top


public Crafty.viewport.reload()

Recalculate and reload stage width, height and position. Useful when browser return wrong results on init (like safari on Ipad2). You should also call this method if you insert custom DOM elements that affect Crafty's stage offset.

Back to top



called to cancel camera animations
public Crafty.viewport.reset()

Resets the viewport to starting values, and cancels any existing camera animations. Called when scene() is run.