subzey/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div>
		<select id="type">
			<option value="naive">Naive</option>
			<option value="onefill">Fill once</option>
			<option value="path2d">Using Path2D</option>
		</select>
		<out id="fps" style="position:absolute"></out>
		<pre id="code" style="position:absolute; background: white; padding: 5px"></pre>
	</div>
	<canvas id="a" width=1024 height=768></canvas>
	<script>
	var a = document.getElementById('a');
	var c = a.getContext('2d');
	var out = document.getElementById('fps');
	var select = document.getElementById('type');

function naive(){
	for (var x=-30; x<1024; x+=30){
		for (var y=-30; y<768; y+=30){
			c.beginPath();
			c.moveTo(x + 15, y + 0);
			c.lineTo(x + 24, y + 25);
			c.lineTo(x + 0, y + 10);
			c.lineTo(x + 30, y + 10);
			c.lineTo(x + 6, y + 25);
			c.fill();
		}
	}
}

function onefill(){
	c.beginPath();
	for (var x=-30; x<1024; x+=30){
		for (var y=-30; y<768; y+=30){
			c.moveTo(x + 15, y + 0);
			c.lineTo(x + 24, y + 25);
			c.lineTo(x + 0, y + 10);
			c.lineTo(x + 30, y + 10);
			c.lineTo(x + 6, y + 25);
		}
	}
	c.fill();
}

var path = null;

function path2d(){
	if (!path){
		path = new Path2D();
		for (var x=-30; x<1024; x+=30){
			for (var y=-30; y<768; y+=30){
				path.moveTo(x + 15, y + 0);
				path.lineTo(x + 24, y + 25);
				path.lineTo(x + 0, y + 10);
				path.lineTo(x + 30, y + 10);
				path.lineTo(x + 6, y + 25);
			}
		}
	}
	c.fill(path);
}

	var startDate = Date.now();

	var paintfn = null;
	function changePaintFn(){
		switch (select.value){
			case 'path2d':
				paintfn = path2d;
				break;
			case 'onefill':
				paintfn = onefill;
				break;
			default:
				paintfn = naive;
		}
		document.getElementById('code').innerText = paintfn.toString();
	}
	select.addEventListener('change', changePaintFn, false);
	changePaintFn();

	(function paint(){
		var dateDiff = (Date.now() - startDate) / 1e3;
		a.width ^= 0;

		c.save();
		c.translate(Math.sin(dateDiff) * 15, Math.cos(dateDiff) * 15);
		var s = Date.now();

		for (var i=0; i<10; i++){
			c.fillStyle = 'hsl(' + ((dateDiff * 10)%360 + i*20) + ', 50%, 50%)';
			c.translate(1, 0);
			paintfn();
		}


		var diff = Date.now() - s;
		out.textContent = diff + ' ms';
		c.restore();

		requestAnimationFrame(paint);
	})();


	naive();


	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<div>
	<select id="type">
	<option value="naive">Naive</option>
	<option value="onefill">Fill once</option>
	<option value="path2d">Using Path2D</option>
	</select>
	<out id="fps" style="position:absolute"></out>
	<pre id="code" style="position:absolute; background: white; padding: 5px"></pre>
	</div>
	<canvas id="a" width=1024 height=768></canvas>
	<script>
	var a = document.getElementById('a');
	var c = a.getContext('2d');
	var out = document.getElementById('fps');
	var select = document.getElementById('type');

	function naive(){
	for (var x=-30; x<1024; x+=30){
	for (var y=-30; y<768; y+=30){
	c.beginPath();
	c.moveTo(x + 15, y + 0);
	c.lineTo(x + 24, y + 25);
	c.lineTo(x + 0, y + 10);
	c.lineTo(x + 30, y + 10);
	c.lineTo(x + 6, y + 25);
	c.fill();
	}
	}
	}

	function onefill(){
	c.beginPath();
	for (var x=-30; x<1024; x+=30){
	for (var y=-30; y<768; y+=30){
	c.moveTo(x + 15, y + 0);
	c.lineTo(x + 24, y + 25);
	c.lineTo(x + 0, y + 10);
	c.lineTo(x + 30, y + 10);
	c.lineTo(x + 6, y + 25);
	}
	}
	c.fill();
	}

	var path = null;

	function path2d(){
	if (!path){
	path = new Path2D();
	for (var x=-30; x<1024; x+=30){
	for (var y=-30; y<768; y+=30){
	path.moveTo(x + 15, y + 0);
	path.lineTo(x + 24, y + 25);
	path.lineTo(x + 0, y + 10);
	path.lineTo(x + 30, y + 10);
	path.lineTo(x + 6, y + 25);
	}
	}
	}
	c.fill(path);
	}

	var startDate = Date.now();

	var paintfn = null;
	function changePaintFn(){
	switch (select.value){
	case 'path2d':
	paintfn = path2d;
	break;
	case 'onefill':
	paintfn = onefill;
	break;
	default:
	paintfn = naive;
	}
	document.getElementById('code').innerText = paintfn.toString();
	}
	select.addEventListener('change', changePaintFn, false);
	changePaintFn();

	(function paint(){
	var dateDiff = (Date.now() - startDate) / 1e3;
	a.width ^= 0;

	c.save();
	c.translate(Math.sin(dateDiff) * 15, Math.cos(dateDiff) * 15);
	var s = Date.now();

	for (var i=0; i<10; i++){
	c.fillStyle = 'hsl(' + ((dateDiff * 10)%360 + i*20) + ', 50%, 50%)';
	c.translate(1, 0);
	paintfn();
	}


	var diff = Date.now() - s;
	out.textContent = diff + ' ms';
	c.restore();

	requestAnimationFrame(paint);
	})();



	naive();


	</script>
	</body>
	</html>