jeisenma/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Multiple Canvases Example</title>
	<link rel="stylesheet" href="http://paperjs.org/static/css/style.css">
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js?1312143495000"></script>

        <script type="text/paperscript" canvas="stroked">

		var path = new Path.Circle(view.center, 30);
		path.strokeColor = 'black';

		function onFrame(event)
		{ path.position.x = view.center.x + 40*Math.sin(event.time); }

        </script>

	<script type="text/paperscript" canvas="dotted">

		var path = new Path.Circle(view.center, 30);
		path.strokeColor = 'black';
		path.dashArray = [10, 4];

		function onFrame(event)
		{ path.rotate(-4); }

		function onMouseMove(event)
		{ path.position = event.point; }

	</script>

	<script type="text/paperscript" canvas="filled">

		var path = new Path.Circle(view.center, 30);
		path.fillColor = 'black';
		var star = new Path.Star(view.center, 6, 8, 15);
		star.fillColor = new HSBColor(Math.random() * 360, 1, 1);

		function onFrame(event)
		{ star.rotate(3); }

	</script>

        <style type="text/css">
                body,td,th {color: #FFF;}
                .container {
                       width: 50%;
                       float: left;
                }
                .clear {
                	clear: both;
                }
        </style>

</head>

<body style="background:black">

<p>Here are two canvases inside of div's</p>

<div class="container" align="center">
    This is how you make a stroked circle sway back and forth.<br>
    <canvas id='stroked' width=160 height=120 style='background:white'></canvas>
</div>

<div class="container" align="center">
    This is how you make a rotating dotted circle that follows the mouse.<br>
    <canvas id='dotted' width=160 height=120 style='background:white'></canvas>
</div>

<div class="clear">
    <p><br><br>
    And here's a canvas outside of a div: <br>
    This is how you make a black circle with a rotating star on top.<br>
	<canvas id='filled' width=160 height=120 style='background:white'></canvas>
    </p>
</div>

<p> You can put more text down here.  Or more canvas elements.... </p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Multiple Canvases Example</title>
	<link rel="stylesheet" href="http://paperjs.org/static/css/style.css">
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js?1312143495000"></script>

	<script type="text/paperscript" canvas="stroked">

	var path = new Path.Circle(view.center, 30);
	path.strokeColor = 'black';

	function onFrame(event)
	{ path.position.x = view.center.x + 40*Math.sin(event.time); }

	</script>

	<script type="text/paperscript" canvas="dotted">

	var path = new Path.Circle(view.center, 30);
	path.strokeColor = 'black';
	path.dashArray = [10, 4];

	function onFrame(event)
	{ path.rotate(-4); }

	function onMouseMove(event)
	{ path.position = event.point; }

	</script>

	<script type="text/paperscript" canvas="filled">

	var path = new Path.Circle(view.center, 30);
	path.fillColor = 'black';
	var star = new Path.Star(view.center, 6, 8, 15);
	star.fillColor = new HSBColor(Math.random() * 360, 1, 1);

	function onFrame(event)
	{ star.rotate(3); }

	</script>

	<style type="text/css">
	body,td,th {color: #FFF;}
	.container {
	width: 50%;
	float: left;
	}
	.clear {
	clear: both;
	}
	</style>

	</head>

	<body style="background:black">

	<p>Here are two canvases inside of div's</p>

	<div class="container" align="center">
	This is how you make a stroked circle sway back and forth.<br>
	<canvas id='stroked' width=160 height=120 style='background:white'></canvas>
	</div>

	<div class="container" align="center">
	This is how you make a rotating dotted circle that follows the mouse.<br>
	<canvas id='dotted' width=160 height=120 style='background:white'></canvas>
	</div>

	<div class="clear">
	<p><br><br>
	And here's a canvas outside of a div: <br>
	This is how you make a black circle with a rotating star on top.<br>
	<canvas id='filled' width=160 height=120 style='background:white'></canvas>
	</p>
	</div>

	<p> You can put more text down here. Or more canvas elements.... </p>

	</body>
	</html>