index.html

<!doctype html>
<html class="no-js">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Prototypo.js | Parametric Font Engine.</title>
		<meta name="description" content="">
		<!-- it's an app, disable zooming on mobile devices -->
		<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

		<link rel="stylesheet" href="bower_components/knacss/css/knacss.css">
		<style>

		</style>
		<script src="//localhost:8081"></script>

	</head>
	<body>
		<!--[if lt IE 10]>
			<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
		<![endif]-->

		<h1 class="pam">
			Prototypo.js
		</h1>

		<canvas id="canvas1" width="512" height="512"></canvas>

		<script src="dist/prototypo.js"></script>

		<script>
			/* global prototypo */
			prototypo.setup('canvas1');

			var xhr = new XMLHttpRequest(),
				font,
				fontSrc,
				glyph;

			// synchronous request, YOLO
			xhr.open('GET', 'node_modules/test.ptf/dist/font.json', false);
			xhr.onload = function() {
				if ( this.status === 200 ) {
					fontSrc = JSON.parse(this.response);
				}
			};
			xhr.send();

			font = prototypo.parametricFont( fontSrc );
			glyph = font.glyphMap.L;
			glyph.update({ width: 10, thickness: 10, xHeight: 400 });

			glyph.visible = true;
			glyph.contours.forEach(function(contour) {
				if ( contour.skeleton ) {
					contour.visible = false;
				} else {
					contour.visible = true;
				}
			});
			glyph.components.forEach(function(component) {
				component.visible = true;
				component.contours.forEach(function(contour) {
					if ( contour.skeleton ) {
						contour.visible = false;
					} else {
						contour.visible = true;
					}
				});
			});

			prototypo.paper.view.update();

			// console.log(glyph.solvingOrder.map(path => path.join('.')));
			console.log(glyph);
			// console.log(glyph.contours[3].exportSVG());

			window.glyph = glyph;
			window.font = font;
		</script>

		<script>
			/* jshint ignore:start */
			// google analytics
			var _gaq=[['_setAccount','UA-41962243-3'],['_trackPageview']];
			(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
			g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
			s.parentNode.insertBefore(g,s)}(document,'script'));
		</script>
	</body>
</html>