examples/Cache.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Using cache and snapToPixel</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;
	var shape;
	var radius = 50;
	var rings = 40;

	function init() {
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// create a large number of slightly complex vector shapes, and give them random positions and velocities:

		var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];

		for (var i = 0; i < 200; i++) {
			shape = new createjs.Shape();
			for (var j = rings; j > 0; j--) {
				shape.graphics.beginFill(colors[Math.random() * colors.length | 0]).drawCircle(0, 0, radius * j / rings);
			}
			shape.x = Math.random() * canvas.width;
			shape.y = Math.random() * canvas.height;
			shape.velX = Math.random() * 10 - 5;
			shape.velY = Math.random() * 10 - 5;

			// turn snapToPixel on for all shapes - it's set to false by default on Shape.
			// it won't do anything until stage.snapToPixelEnabled is set to true.
			shape.snapToPixel = true;

			stage.addChild(shape);
		}

		// add a text object to output the current FPS:
		fpsLabel = new createjs.Text("-- fps", "bold 18px Arial", "#FFF");
		stage.addChild(fpsLabel);
		fpsLabel.x = 10;
		fpsLabel.y = 20;

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		var w = canvas.width + radius * 2;
		var h = canvas.height + radius * 2;
		var l = stage.numChildren - 1;

		// iterate through all the children and move them according to their velocity:
		for (var i = 1; i < l; i++) {
			var shape = stage.getChildAt(i);
			shape.x = (shape.x + radius + shape.velX + w) % w - radius;
			shape.y = (shape.y + radius + shape.velY + h) % h - radius;
		}

		fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";

		// draw the updates to stage:
		stage.update(event);
	}

	function toggleCache(value) {
		// iterate all the children except the fpsLabel, and set up the cache:
		var l = stage.numChildren - 1;

		for (var i = 0; i < l; i++) {
			var shape = stage.getChildAt(i);
			if (value) {
				shape.cache(-radius, -radius, radius * 2, radius * 2);
			} else {
				shape.uncache();
			}
		}
	}
</script>

	<style>
		.controls {
			padding: 10px;
		}
	</style>
</head>

<body onload="init();">

<header class="EaselJS">
	<h1>Cache as Bitmap Example</h1>

	<p>This example demonstrates the effect of
		<code>DisplayObject.cache()</code> and <code>snapToPixel</code>
		on performance. Caching can provide performance benefits for some types
		of content because the complex vector
		shapes do not have to be re-rendered each tick. Different browsers have
		different thresholds for when
		caching makes sense. The results for snapToPixel vary between browsers,
		but in general it will have no
		effect on the un-cached shapes, but a significant effect when cached.
	</p>
</header>

<div class="controls">
	<input type="checkbox" onClick="toggleCache(this.checked);"
		   id="toggleCache"/><label for="toggleCache">cache
	enabled</label>
</div>
<canvas id="testCanvas" width="960" height="350"></canvas>
<strong>Note:</strong> The performance benefit varies between browsers, based on
the relative performance of
vector rendering vs drawing small textures.
</body>
</html>