namuol/big_render_area.html

## big_render_area.html
<!DOCTYPE HTML>
<html>
<head>
  <title>pixi.js example 1</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #000000;
    }
  </style>
  <script src="pixi.js"></script>

</head>
<body>
  <script>

  // create an new instance of a pixi stage
  var stage = new PIXI.Stage(0x66FF99);

  // create a renderer instance

  var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
  // var renderer = new PIXI.CanvasRenderer(window.innerWidth, window.innerHeight, null);

  // add the renderer view element to the DOM
  document.body.appendChild(renderer.view);
  renderer.view.style.position = "absolute";
  renderer.view.style.top = "0px";
  renderer.view.style.left = "0px";
  requestAnimFrame( animate );

  // create a texture from an image path
  var texture = PIXI.Texture.fromImage("bunny.png");
  // create a new Sprite using the texture
  var bunny = new PIXI.Sprite(texture);

  // center the sprites anchor point
  bunny.anchor.x = 0.5;
  bunny.anchor.y = 0.5;

  // move the sprite t the center of the screen
  bunny.position.x = renderer.width/2;
  bunny.position.y = renderer.height/2;

  stage.addChild(bunny);

  var t = 0;
  var ticks = 0;
  var accumulator = 0;

  setInterval(function() {
  	var avgTickTime = accumulator / ticks;
  	console.log('avg tick time: ' + avgTickTime + ' ms');
  	ticks = 0;
  	accumulator = 0;
  }, 2000);

  function animate() {

      requestAnimFrame( animate );

      // just for fun, lets rotate mr rabbit a little
      bunny.rotation += 0.1;
      t += 0.01;
      bunny.position.x = renderer.width/2 + Math.sin(t) * renderer.width/4;
      bunny.position.y = renderer.height/2 + Math.cos(t) * renderer.height/4;


      // render the stage
      var start = Date.now();

      renderer.render(stage);

      ++ticks;
      accumulator += Date.now() - start;

  }

  </script>

  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>pixi.js example 1</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	background-color: #000000;
	}
	</style>
	<script src="pixi.js"></script>

	</head>
	<body>
	<script>

	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0x66FF99);

	// create a renderer instance

	var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
	// var renderer = new PIXI.CanvasRenderer(window.innerWidth, window.innerHeight, null);

	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);
	renderer.view.style.position = "absolute";
	renderer.view.style.top = "0px";
	renderer.view.style.left = "0px";
	requestAnimFrame( animate );

	// create a texture from an image path
	var texture = PIXI.Texture.fromImage("bunny.png");
	// create a new Sprite using the texture
	var bunny = new PIXI.Sprite(texture);

	// center the sprites anchor point
	bunny.anchor.x = 0.5;
	bunny.anchor.y = 0.5;

	// move the sprite t the center of the screen
	bunny.position.x = renderer.width/2;
	bunny.position.y = renderer.height/2;

	stage.addChild(bunny);

	var t = 0;
	var ticks = 0;
	var accumulator = 0;

	setInterval(function() {
	var avgTickTime = accumulator / ticks;
	console.log('avg tick time: ' + avgTickTime + ' ms');
	ticks = 0;
	accumulator = 0;
	}, 2000);

	function animate() {

	requestAnimFrame( animate );

	// just for fun, lets rotate mr rabbit a little
	bunny.rotation += 0.1;
	t += 0.01;
	bunny.position.x = renderer.width/2 + Math.sin(t) * renderer.width/4;
	bunny.position.y = renderer.height/2 + Math.cos(t) * renderer.height/4;


	// render the stage
	var start = Date.now();

	renderer.render(stage);

	++ticks;
	accumulator += Date.now() - start;

	}

	</script>

	</body>
	</html>