killroy42 · January 5, 2016 21:12
diff --git a/lctv_overlay.html b/lctv_overlay.html
 <html>
 	<style>
 		/*
 		@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
 		body {
 				font-family: 'Open Sans', sans-serif;
 		}
 		*/
 		body {
 			margin: 0;
 		}
 		p {
 			color: #fff;
 			font-size: 1.4rem;
 			font-family: "Open Sans";
 			text-shadow:
 				0 0 0.4rem #000,
 				0 0 0.4rem #000,
 				0 0 0.4rem #000,
 				0 0 0.4rem #000,
 				0 0 0.4rem #000,
 				0 0 0.4rem #000,
 				;
 			margin: 0.1rem 0.5rem;
 		}
 		p strong {
 			font-size: 1.6rem;
 		}
 		#canvas {
 			width: 1920px;
 			height: 1080px;
 		}
 	</style>
 	<body>
 		<canvas width="3840" height="2160" id="canvas"></canvas>
 		<script>
 			var canvas = document.getElementById('canvas');
 			var ctx = canvas.getContext('2d');
 			ctx.font = '400 44px Open Sans';
 			ctx.fillStyle = '#eee';
 			ctx.shadowColor = '#1a1a1a';
 			ctx.shadowOffsetX = 0;
 			ctx.shadowOffsetY = 0;
 			ctx.shadowBlur = 6;

 			var s, i, x, y;

 				function frame(t) {
 				window.requestAnimationFrame(frame);
 					function drawShadow(s, x, y) {
 						ctx.shadowBlur = 16;
 						for(i = 0; i < 2; i++) ctx.fillText(s, x, y);
 						ctx.shadowBlur = 6;
 						for(i = 0; i < 8; i++) ctx.fillText(s, x, y);
 					}
 					function drawText(s, x, y) {
 						ctx.fillText(s, x, y);
 					}

 					function drawLine(s, x, y) {
 						var xx = 0, yy = 0;
 						s.split('').forEach(function(letter, idx) {
 							yy = Math.sin(t*0.005 + idx * 0.2 + y) * 3;
 							drawShadow(letter, x+xx, y+yy);
 							xx += ctx.measureText(letter).width;
 						});
 						xx = 0;
 						yy = 0;
 						s.split('').forEach(function(letter, idx) {
 							yy = Math.sin(t*0.005 + idx * 0.2 + y) * 3;
 							drawText(letter, x+xx, y+yy);
 							xx += ctx.measureText(letter).width;
 						});
 					}

 				/*
 				var scale = 1 + Math.sin(t*0.01) * 0.05;
 				ctx.save();
 				ctx.translate(400, 30);
 				//ctx.scale(scale, scale);
 				ctx.translate(-400, -30);
 				*/

 				ctx.clearRect(0, 0, canvas.width, canvas.height);
 				s = 'Check out my game project at facebook.com/xenocideacademy/';
 				drawLine(s, 10, 60);
 				s = 'Music by @AryBeats https://soundcloud.com/arybeats';
 				drawLine(s, 10, 120);
 				ctx.restore();
 			}

 			window.requestAnimationFrame(frame);
 		</script>
 	</body>
 </html>
	<html>
	<style>
	/*
	@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
	body {
	font-family: 'Open Sans', sans-serif;
	}
	*/
	body {
	margin: 0;
	}
	p {
	color: #fff;
	font-size: 1.4rem;
	font-family: "Open Sans";
	text-shadow:
	0 0 0.4rem #000,
	0 0 0.4rem #000,
	0 0 0.4rem #000,
	0 0 0.4rem #000,
	0 0 0.4rem #000,
	0 0 0.4rem #000,
	;
	margin: 0.1rem 0.5rem;
	}
	p strong {
	font-size: 1.6rem;
	}
	#canvas {
	width: 1920px;
	height: 1080px;
	}
	</style>
	<body>
	<canvas width="3840" height="2160" id="canvas"></canvas>
	<script>
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	ctx.font = '400 44px Open Sans';
	ctx.fillStyle = '#eee';
	ctx.shadowColor = '#1a1a1a';
	ctx.shadowOffsetX = 0;
	ctx.shadowOffsetY = 0;
	ctx.shadowBlur = 6;

	var s, i, x, y;

	function frame(t) {
	window.requestAnimationFrame(frame);
	function drawShadow(s, x, y) {
	ctx.shadowBlur = 16;
	for(i = 0; i < 2; i++) ctx.fillText(s, x, y);
	ctx.shadowBlur = 6;
	for(i = 0; i < 8; i++) ctx.fillText(s, x, y);
	}
	function drawText(s, x, y) {
	ctx.fillText(s, x, y);
	}

	function drawLine(s, x, y) {
	var xx = 0, yy = 0;
	s.split('').forEach(function(letter, idx) {
	yy = Math.sin(t0.005 + idx 0.2 + y) * 3;
	drawShadow(letter, x+xx, y+yy);
	xx += ctx.measureText(letter).width;
	});
	xx = 0;
	yy = 0;
	s.split('').forEach(function(letter, idx) {
	yy = Math.sin(t0.005 + idx 0.2 + y) * 3;
	drawText(letter, x+xx, y+yy);
	xx += ctx.measureText(letter).width;
	});
	}

	/*
	var scale = 1 + Math.sin(t0.01) 0.05;
	ctx.save();
	ctx.translate(400, 30);
	//ctx.scale(scale, scale);
	ctx.translate(-400, -30);
	*/

	ctx.clearRect(0, 0, canvas.width, canvas.height);
	s = 'Check out my game project at facebook.com/xenocideacademy/';
	drawLine(s, 10, 60);
	s = 'Music by @AryBeats https://soundcloud.com/arybeats';
	drawLine(s, 10, 120);
	ctx.restore();
	}

	window.requestAnimationFrame(frame);
	</script>
	</body>
	</html>