diff --git a/examples/Animated/RadialRainbows.html b/examples/Animated/RadialRainbows.html
index 02bc5347..536952c2 100644
--- a/examples/Animated/RadialRainbows.html
+++ b/examples/Animated/RadialRainbows.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,56 +33,53 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			var vector = new Point(doc.size.height, 0);
-			var point = new Point(doc.size).divide(2);
-			var gradient = new Gradient();
-			gradient.type = 'radial';
-			var gradientColor = new GradientColor(gradient, point, point.add(vector));
-			
-			var colors = ['red', 'orange', 'yellow', 'green', 'blue'];
-			var stops = [];
-			for (var i = 0, l = colors.length; i < l * 15; i++) {
-				var stop = new GradientStop(colors[i % l], i / (l * 15));
-				stops.push(stop);
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var vector = new Point(document.size.height, 0);
+		var point = new Point(document.size) / 2;
+		var gradient = new Gradient();
+		gradient.type = 'radial';
+		var gradientColor = new GradientColor(gradient, point, point + vector);
+		
+		var colors = ['red', 'orange', 'yellow', 'green', 'blue'];
+		var stops = [];
+		for (var i = 0, l = colors.length; i < l * 15; i++) {
+			var stop = new GradientStop(colors[i % l], i / (l * 15));
+			stops.push(stop);
+		}
+		
+		gradient.stops = stops;
+		var path = new Path.Rectangle(new Rectangle([0, 0], document.size));
+		path.fillColor = gradientColor;
+		var mouseDown = false;
+		var tool = new Tool({
+			onMouseDown: function(event) {
+				mouseDown = true;
+				gradientColor.hilite = event.point;
+			},
+			onMouseDrag: function(event) {
+				gradientColor.hilite = event.point;
+			},
+			onMouseUp: function(event) {
+				mouseDown = false;
 			}
-			
-			gradient.stops = stops;
-			var path = new Path.Rectangle(new Rectangle([0, 0], doc.size));
-			path.fillColor = gradientColor;
-			var mouseDown = false;
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					mouseDown = true;
-					gradientColor.hilite = event.point;
-				},
-				onMouseDrag: function(event) {
-					gradientColor.hilite = event.point;
-				},
-				onMouseUp: function(event) {
-					mouseDown = false;
-				}
-			});
+		});
 
-			setInterval(draw, 30);
+		setInterval(draw, 30);
 
-			var grow = false;
-			var vector = new Point(150, 0);
-			function draw() {
-				if (grow && vector.length > 300) {
-					grow = false;
-				} else if (!grow && vector.length < 75) {
-					grow = true;
-				}
-				vector.length += (grow ? 1 : -1);
-				vector.angle += 5;
-				if (!mouseDown) {
-					gradientColor.hilite = point.add(vector);
-					doc.redraw();
-				}
+		var grow = false;
+		var vector = new Point(150, 0);
+		function draw() {
+			if (grow && vector.length > 300) {
+				grow = false;
+			} else if (!grow && vector.length < 75) {
+				grow = true;
+			}
+			vector.length += (grow ? 1 : -1);
+			vector.angle += 5;
+			if (!mouseDown) {
+				gradientColor.hilite = point + vector;
+				document.redraw();
 			}
 		}
 	</script>
diff --git a/examples/Animated/RoundedRectangles.html b/examples/Animated/RoundedRectangles.html
index 9a816e05..97316bc1 100644
--- a/examples/Animated/RoundedRectangles.html
+++ b/examples/Animated/RoundedRectangles.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,45 +33,42 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			var mousePoint = new Point(doc.size.divide(2));
-			
-			var amount = 25;
-			var colors = ['red', 'white', 'blue', 'white'];
-			
-			for (var i = 0; i < amount; i++) {
-				var rect = new Rectangle([0, 0], [25, 25]);
-				rect.center = mousePoint;
-				var path = new Path.RoundRectangle(rect, 6);
-				path.fillColor = colors[i % 4];
-				var scale = (1 - i / amount) * 20;
-				path.scale(scale);
-				new PlacedSymbol(path);
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var mousePoint = document.bounds.center;
+		
+		var amount = 25;
+		var colors = ['red', 'white', 'blue', 'white'];
+		
+		for (var i = 0; i < amount; i++) {
+			var rect = new Rectangle([0, 0], [25, 25]);
+			rect.center = mousePoint;
+			var path = new Path.RoundRectangle(rect, 6);
+			path.fillColor = colors[i % 4];
+			var scale = (1 - i / amount) * 20;
+			path.scale(scale);
+			new PlacedSymbol(path);
+		}
+		setInterval(draw, 30);
+		
+		var tool = new Tool({
+			onMouseDrag: function(event) {
+				mousePoint = event.point;
 			}
-			setInterval(draw, 30);
-			
-			var tool = new Tool({
-				onMouseDrag: function(event) {
-					mousePoint = event.point;
-				}
-			});
-			
-			var children = paper.document.activeLayer.children;
-			var count = 0;
-			function draw() {
-				count++;
-				for (var i = 0, l = children.length; i < l; i++) {
-					var item = children[i];
-					var delta = mousePoint.subtract(item.position).divide(i + 1);
-					item.rotate(Math.sin((count + i) / 10) * 7);
-					if (delta.length > 0.1)
-						item.translate(delta);
-				}
-				doc.redraw();
+		});
+		
+		var children = document.activeLayer.children;
+		var count = 0;
+		function draw() {
+			count++;
+			for (var i = 0, l = children.length; i < l; i++) {
+				var item = children[i];
+				var delta = (mousePoint - item.position) / (i + 1);
+				item.rotate(Math.sin((count + i) / 10) * 7);
+				if (delta.length > 0.1)
+					item.translate(delta);
 			}
+			document.redraw();
 		}
 	</script>
 </head>
diff --git a/examples/Animated/animatedStar.html b/examples/Animated/animatedStar.html
index ec103e83..ae7dafe4 100644
--- a/examples/Animated/animatedStar.html
+++ b/examples/Animated/animatedStar.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,48 +33,46 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			var layer = doc.activeLayer;
-			
-			var values = {
-				count: 34,
-				points: 32
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var layer = document.activeLayer;
+	
+		var values = {
+			count: 34,
+			points: 32
+		}
+	
+		var center = new Point(document.size) / 2;
+		for (var i = 0; i < values.count; i++) {
+			var offset = new Point(20 + 10 * i, 0);
+			var path = new Path();
+			path.fillColor = i % 2 ? 'red' : 'black';
+			console.log(path.fillColor);
+			path.closed = true;
+		
+			var l = offset.length;
+			for (var j = 0; j < values.points * 2; j++) {
+				offset.angle += 360 / values.points;
+				var vector = offset.clone()
+				vector.length = l * (j % 2 ? 0.1 : -0.1);
+				path.add(offset + vector);
 			}
-			
-			var center = new Point(doc.size).divide(2)
-			for (var i = 0; i < values.count; i++) {
-				var offset = new Point(20 + 10 * i, 0);
-				var path = new Path();
-				path.fillColor = i % 2 ? 'red' : 'black';
-				path.closed = true;
-				
-				var l = offset.length;
-				for (var j = 0; j < values.points * 2; j++) {
-					offset.angle += 360 / values.points;
-					var vector = offset.clone()
-					vector.length = l * (j % 2 ? 0.1 : -0.1);
-					path.add(offset.add(vector));
-				}
-				path.smooth();
-				var placedSymbol = new PlacedSymbol(path);
-				placedSymbol.position = center;
-				layer.appendBottom(placedSymbol);
-			}
-			setInterval(draw, 30);
+			path.smooth();
+			var placedSymbol = new PlacedSymbol(path);
+			placedSymbol.position = center;
+			layer.appendBottom(placedSymbol);
+		}
+		setInterval(draw, 30);
 
-			var count = 0;
-			function draw() {
-				count++;
-				for (var i = 0, l = layer.children.length; i < l; i++) {
-					var item = layer.children[i];
-					var angle = (values.count - i) * Math.sin(count / 128) / 10;
-					item.rotate(angle);
-				}
-				doc.redraw();
+		var count = 0;
+		function draw() {
+			count++;
+			for (var i = 0, l = layer.children.length; i < l; i++) {
+				var item = layer.children[i];
+				var angle = (values.count - i) * Math.sin(count / 128) / 10;
+				item.rotate(angle);
 			}
+			document.redraw();
 		}
 	</script>
 </head>
diff --git a/examples/Scripts/BouncingBalls.html b/examples/Scripts/BouncingBalls.html
index d288672c..bc46cff4 100644
--- a/examples/Scripts/BouncingBalls.html
+++ b/examples/Scripts/BouncingBalls.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,99 +33,94 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var balls = [];
 
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
+		var circlePath = new Path.Circle([0, 0], 10);
+		circlePath.fillColor = new GradientColor(null, [0, 0], [0, 12], [0, 2]);
+		circlePath.fillColor.gradient.type = 'radial';
 
-			var balls = [];
+		var symbol = new Symbol(circlePath);
+		
 
-			var circlePath = new Path.Circle([0, 0], 10);
-			circlePath.fillColor = new GradientColor(null, [0, 0], [0, 12], [0, 2]);
-			circlePath.fillColor.gradient.type = 'radial';
+		var group = new Group();
 
-			var symbol = new Symbol(circlePath);
-			
-
-			var group = new Group();
-
-			var Ball = Base.extend({
-				initialize: function(point, vector) {
-					if (!vector || vector.isZero()) {
-						this.vector = Point.random().multiply(5);
-					} else {
-						this.vector = vector.multiply(1.5);
-					}
-					this.point = point;
-					this.dampen = 0.4;
-					this.gravity = 3;
-					this.bounce = -0.6;
-					this.radius = 50 * Math.random() + 10;
-					this.item = new PlacedSymbol(symbol);
-					this.item.position = point;
-					this.item.scale(this.radius / 10);
-					group.appendTop(this.item);
-				},
-
-				contrainPoint: function() {
-					var x = this.point.x;
-					var y = this.point.y;
-					var radius = this.radius;
-					this.point.x = Math.min(Math.max(radius, x), doc.size.width - radius);
-					this.point.y = Math.min(Math.max(radius, y), doc.size.height - radius);
-				},
-
-				iterate: function() {
-					this.vector.y += this.gravity;
-					this.vector.x *= 0.99;
-					var pre = this.point.add(this.vector);
-					if (pre.x < this.radius || pre.x > doc.size.width - this.radius)
-						this.vector.x *= -this.dampen;
-					if (pre.y < this.radius || pre.y > doc.size.height - this.radius) {
-						if (Math.abs(this.vector.x) < 3) {
-							this.vector.x = Math.random() * 150 - 75;
-							this.vector.y = Math.random() * 100 + 20;
-						}
-						this.vector.y *= this.bounce;
-					}
-					this.point = this.point.add(this.vector);
-					this.contrainPoint();
-					this.item.position = this.point;
+		var Ball = Base.extend({
+			initialize: function(point, vector) {
+				if (!vector || vector.isZero()) {
+					this.vector = Point.random() * 5;
+				} else {
+					this.vector = vector * 1.5;
 				}
-			});
+				this.point = point;
+				this.dampen = 0.4;
+				this.gravity = 3;
+				this.bounce = -0.6;
+				this.radius = 50 * Math.random() + 10;
+				this.item = new PlacedSymbol(symbol);
+				this.item.position = point;
+				this.item.scale(this.radius / 10);
+				group.appendTop(this.item);
+			},
 
-			for (var i = 0; i < 10; i++) {
-				var position = Point.random().multiply(doc.size);
-				var vector = Point.random().subtract(0.5, 0).multiply(50, 100);
-				var ball = new Ball(position, vector);
+			contrainPoint: function() {
+				var x = this.point.x;
+				var y = this.point.y;
+				var radius = this.radius;
+				this.point.x = Math.min(Math.max(radius, x), document.size.width - radius);
+				this.point.y = Math.min(Math.max(radius, y), document.size.height - radius);
+			},
+
+			iterate: function() {
+				this.vector.y += this.gravity;
+				this.vector.x *= 0.99;
+				var pre = this.point + this.vector;
+				if (pre.x < this.radius || pre.x > document.size.width - this.radius)
+					this.vector.x *= -this.dampen;
+				if (pre.y < this.radius || pre.y > document.size.height - this.radius) {
+					if (Math.abs(this.vector.x) < 3) {
+						this.vector.x = Math.random() * 150 - 75;
+						this.vector.y = Math.random() * 100 + 20;
+					}
+					this.vector.y *= this.bounce;
+				}
+				this.point = this.point + this.vector;
+				this.contrainPoint();
+				this.item.position = this.point;
+			}
+		});
+
+		for (var i = 0; i < 10; i++) {
+			var position = Point.random() * document.size;
+			var vector = (Point.random() - [0.5, 0]) * [50, 100];
+			var ball = new Ball(position, vector);
+			balls.push(ball);
+		}
+
+		var lastDelta;
+		tool = new Tool({
+			onMouseDrag: function(event) {
+				lastDelta = event.delta;
+			},
+			onMouseUp: function(event) {
+				var ball = new Ball(event.point, lastDelta);
 				balls.push(ball);
+				lastDelta = null;
 			}
+		});
+		setInterval(draw, 30);
 
-			var lastDelta;
-			tool = new Tool({
-				onMouseDrag: function(event) {
-					lastDelta = event.delta;
-				},
-				onMouseUp: function(event) {
-					var ball = new Ball(event.point, lastDelta);
-					balls.push(ball);
-					lastDelta = null;
-				}
-			});
-			setInterval(draw, 30);
+		var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
+		boundPath.strokeColor = 'red';
+		boundPath.strokeWidth = 1;
 
-			var boundPath = new Path.Rectangle([-10, -10], [-11, -11]);
-			boundPath.strokeColor = 'red';
-			boundPath.strokeWidth = 1;
-
-			function draw() {
-				for (var i = 0, l = balls.length; i < l; i++) {
-					balls[i].iterate();
-				}
-				boundPath.bounds = group.bounds;
-				doc.redraw();
+		function draw() {
+			for (var i = 0, l = balls.length; i < l; i++) {
+				balls[i].iterate();
 			}
+			boundPath.bounds = group.bounds;
+			document.redraw();
 		}
 	</script>
 </head>
diff --git a/examples/Scripts/arcTo.html b/examples/Scripts/arcTo.html
index cfd501f4..0282b012 100644
--- a/examples/Scripts/arcTo.html
+++ b/examples/Scripts/arcTo.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,30 +33,26 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-
-			var point = new Point(1024, 768).divide(2);
-			for (var i = 0; i < 30; i++) {
-				var vector = new Point(10 + 20 * i, 0).rotate(i);
-				var l = vector.length;
-				var path = new Path();
-				path.fillColor = i % 2 ? 'red' : 'black';
-				path.closed = true;
-				for (var j = 0; j < 17; j++) {
-					vector = vector.rotate(45 / 2);
-					if (j == 0) {
-						path.add(point.add(vector));
-					} else {
-						path.arcTo(point.add(vector), true);
-					}
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var point = document.bounds.center;
+		for (var i = 0; i < 30; i++) {
+			var vector = new Point(10 + 20 * i, 0).rotate(i);
+			var l = vector.length;
+			var path = new Path();
+			path.fillColor = i % 2 ? 'red' : 'black';
+			path.closed = true;
+			for (var j = 0; j < 17; j++) {
+				vector = vector.rotate(45 / 2);
+				if (j == 0) {
+					path.add(point + vector);
+				} else {
+					path.arcTo(point + vector, true);
 				}
-				doc.activeLayer.appendBottom(path);
 			}
-			doc.redraw();
+			document.activeLayer.appendBottom(path);
 		}
+		document.redraw();
 	</script>
 </head>
 <body>
diff --git a/examples/Scripts/circle.html b/examples/Scripts/circle.html
index 81251390..d33e0f7f 100644
--- a/examples/Scripts/circle.html
+++ b/examples/Scripts/circle.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,19 +33,14 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		var count = 0;
-		var doc;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
-			var center = doc.size.divide(2);
-			for (var i = 0; i < 70; i++) {
-				var path = new Path.Circle(center, i * 5);
-				path.strokeColor = 'black';
-			}
-			doc.redraw();
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var center = document.bounds.center;
+		for (var i = 0; i < 70; i++) {
+			var path = new Path.Circle(center, i * 5);
+			path.strokeColor = 'black';
 		}
+		document.redraw();
 	</script>
 </head>
 <body>
diff --git a/examples/Scripts/letter.html b/examples/Scripts/letter.html
index d44ad2d3..b8451969 100644
--- a/examples/Scripts/letter.html
+++ b/examples/Scripts/letter.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,31 +33,27 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-
-			var letterPath = new Path(
-				new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
-				new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
-				new Segment(new Point(145.87060546875, 245.9306640625), new Point(0, 18.947265625), new Point(0, -17.27587890625)),
-				new Segment(new Point(110.4833984375, 208.87158203125), new Point(25.35595703125, 9.4736328125), new Point(-30.65087890625, -11.14599609375)),
-				new Segment(new Point(60.88525390625, 155.37255859375), new Point(0, 26.19189453125), new Point(0, -29.25732421875)),
-				new Segment(new Point(121.62890625, 104.380859375), new Point(-36.501953125, 0), new Point(18.947265625, 0)),
-				new Segment(new Point(162.86767578125, 113.576171875), new Point(-8.08056640625, -4.73681640625)),
-				new Segment(new Point(156.18017578125, 133.35986328125), null, new Point(-5.8515625, -3.62255859375)),
-				new Segment(new Point(120.79296875, 124.443359375), new Point(16.9970703125, 0), new Point(-25.63525390625, 0)),
-				new Segment(new Point(85.4052734375, 152.5859375), new Point(0, -12.8173828125), new Point(0, 17.55419921875)),
-				new Segment(new Point(122.7431640625, 188.80908203125), new Point(-25.91357421875, -10.03076171875), new Point(31.76513671875, 12.26025390625)),
-				new Segment(new Point(170.39111328125, 243.97998046875), new Point(0, -27.58544921875), new Point(0, 28.97900390625)),
-				new Segment(new Point(104.91015625, 298.31494140625), new Point(44.30419921875, 0), new Point(-18.111328125, 0)),
-				new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
-			);
-			letterPath.closed = true;
-			letterPath.fillColor = 'black';
-			doc.redraw();
-		}
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var letterPath = new Path(
+			new Segment(new Point(63.39306640625, 265.7138671875), null, new Point(10.86669921875, 6.96630859375)),
+			new Segment(new Point(106.58203125, 277.97412109375), new Point(-16.71826171875, 0), new Point(24.79931640625, 0)),
+			new Segment(new Point(145.87060546875, 245.9306640625), new Point(0, 18.947265625), new Point(0, -17.27587890625)),
+			new Segment(new Point(110.4833984375, 208.87158203125), new Point(25.35595703125, 9.4736328125), new Point(-30.65087890625, -11.14599609375)),
+			new Segment(new Point(60.88525390625, 155.37255859375), new Point(0, 26.19189453125), new Point(0, -29.25732421875)),
+			new Segment(new Point(121.62890625, 104.380859375), new Point(-36.501953125, 0), new Point(18.947265625, 0)),
+			new Segment(new Point(162.86767578125, 113.576171875), new Point(-8.08056640625, -4.73681640625)),
+			new Segment(new Point(156.18017578125, 133.35986328125), null, new Point(-5.8515625, -3.62255859375)),
+			new Segment(new Point(120.79296875, 124.443359375), new Point(16.9970703125, 0), new Point(-25.63525390625, 0)),
+			new Segment(new Point(85.4052734375, 152.5859375), new Point(0, -12.8173828125), new Point(0, 17.55419921875)),
+			new Segment(new Point(122.7431640625, 188.80908203125), new Point(-25.91357421875, -10.03076171875), new Point(31.76513671875, 12.26025390625)),
+			new Segment(new Point(170.39111328125, 243.97998046875), new Point(0, -27.58544921875), new Point(0, 28.97900390625)),
+			new Segment(new Point(104.91015625, 298.31494140625), new Point(44.30419921875, 0), new Point(-18.111328125, 0)),
+			new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
+		);
+		letterPath.closed = true;
+		letterPath.fillColor = 'black';
+		document.redraw();
 	</script>
 </head>
 <body>
diff --git a/examples/Scripts/lines.html b/examples/Scripts/lines.html
index cae27b42..caaa43b4 100644
--- a/examples/Scripts/lines.html
+++ b/examples/Scripts/lines.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,25 +33,24 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
 		var count = 0;
-		var doc;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
-			setInterval(draw, 20);
-		}
+		setInterval(draw, 20);
 		
 		function draw() {
 			count++;
-			doc.activeLayer.children = [];
-			var point = new Point(1024, 768).divide(2);
+			document.activeLayer.children = [];
+			var point = new Point(document.size) / 2;
 			var vector = new Point(100, 0);
 			for (var i = 0; i < 180; i++) {
-				var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
+				var center = point + vector.rotate(i * 2).normalize(30);
+				var length = 30 + Math.abs(Math.sin((i + count / 20)) * 300);
+				var end = point + vector.rotate(i * 2).normalize(length);
+				var path = new Path.Line(center, end);
 				path.strokeColor = i % 4 ? 'black' : 'red';
 			}
-			doc.redraw();
+			document.redraw();
 		}
 	</script>
 </head>
diff --git a/examples/Scripts/rectangle.html b/examples/Scripts/rectangle.html
index 0a4fc169..8964f597 100644
--- a/examples/Scripts/rectangle.html
+++ b/examples/Scripts/rectangle.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,16 +33,11 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		var count = 0;
-		var doc;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
-			var path = new Path.Rectangle([50, 50], [100, 100]);
-			path.strokeColor = 'black';
-			doc.redraw();
-		}
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var path = new Path.Rectangle([50, 50], [100, 100]);
+		path.strokeColor = 'black';
+		document.redraw();
 	</script>
 </head>
 <body>
diff --git a/examples/Scripts/roundRectangle.html b/examples/Scripts/roundRectangle.html
index f3d4a1c8..40292d7e 100644
--- a/examples/Scripts/roundRectangle.html
+++ b/examples/Scripts/roundRectangle.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,22 +33,18 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
 		var count = 0;
-		var doc;
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			doc = new Document(canvas);
-			setInterval(draw, 30);
-		}
+		setInterval(draw, 30);
 		function draw() {
 			count++;
-			doc.activeLayer.children = [];
+			document.activeLayer.children = [];
 			var rect = new Rectangle([150, 150], [300, 300]);
 			var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
 			var path = new Path.RoundRectangle(rect, size);
 			path.fillColor = 'black';
-			doc.redraw();
+			document.redraw();
 		}
 	</script>
 </head>
diff --git a/examples/Scripts/star.html b/examples/Scripts/star.html
index e9f8b351..5a7833e1 100644
--- a/examples/Scripts/star.html
+++ b/examples/Scripts/star.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,28 +33,24 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-
-			var point = new Point(1024, 768).divide(2);
-			for (var i = 0; i < 30; i++) {
-				var vector = new Point(1 + 10 * i, 0).rotate(i);
-				var l = vector.length;
-				var path = new Path();
-				path.fillColor = i % 2 ? 'red' : 'black';
-				path.closed = true;
-				for (var j = 0; j < 32; j++) {
-					vector = vector.rotate(45 / 4);
-					var newPoint = point.add(vector).add(vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1)));
-					path.add(newPoint);
-				}
-				path.smooth();
-				doc.activeLayer.appendBottom(path);
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var point = new Point(document.size) / 2;
+		for (var i = 0; i < 30; i++) {
+			var vector = new Point(1 + 10 * i, 0).rotate(i);
+			var l = vector.length;
+			var path = new Path();
+			path.fillColor = i % 2 ? 'red' : 'black';
+			path.closed = true;
+			for (var j = 0; j < 32; j++) {
+				vector = vector.rotate(45 / 4);
+				var newPoint = point + vector + vector.rotate(-180).normalize(l * (j % 2 ? 0.1 : -0.1));
+				path.add(newPoint);
 			}
-			doc.redraw();
+			path.smooth();
+			document.activeLayer.appendBottom(path);
 		}
+		document.redraw();
 	</script>
 </head>
 <body>
diff --git a/examples/Scripts/strokeJoin.html b/examples/Scripts/strokeJoin.html
index 00d07830..51d41f72 100644
--- a/examples/Scripts/strokeJoin.html
+++ b/examples/Scripts/strokeJoin.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,45 +33,42 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			var path = new Path([100, 150], [150, 200], [200, 150]);
-			path.strokeColor = 'black';
-			path.strokeWidth = 30;
-			path.strokeJoin = 'round';
-			
-			var path = new Path([240, 150], [290, 200], [340, 150]);
-			path.strokeColor = 'black';
-			path.strokeWidth = 30;
-			path.strokeJoin = 'bevel';
-			
-			var path = new Path([380, 150], [430, 200], [480, 150]);
-			path.strokeColor = 'black';
-			path.strokeWidth = 30;
-			path.strokeJoin = 'miter';
-			
-			var path = new Path([100, 250], [150, 300], [200, 250]);
-			path.strokeColor = 'black';
-			path.strokeWidth = 30;
-			path.strokeJoin = 'round';
-			path.strokeCap = 'round';
-			
-			var path = new Path([240, 250], [290, 300], [340, 250]);
-			path.strokeColor = 'black';
-			path.strokeWidth = 30;
-			path.strokeJoin = 'bevel';
-			path.strokeCap = 'square';
-			
-			var path = new Path([380, 250], [430, 300], [480, 250]);
-			path.strokeColor = 'black';
-			path.strokeWidth = 30;
-			path.strokeJoin = 'miter';
-			path.strokeCap = 'butt';
-			
-			doc.redraw();
-		}
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var path = new Path([100, 150], [150, 200], [200, 150]);
+		path.strokeColor = 'black';
+		path.strokeWidth = 30;
+		path.strokeJoin = 'round';
+		
+		var path = new Path([240, 150], [290, 200], [340, 150]);
+		path.strokeColor = 'black';
+		path.strokeWidth = 30;
+		path.strokeJoin = 'bevel';
+		
+		var path = new Path([380, 150], [430, 200], [480, 150]);
+		path.strokeColor = 'black';
+		path.strokeWidth = 30;
+		path.strokeJoin = 'miter';
+		
+		var path = new Path([100, 250], [150, 300], [200, 250]);
+		path.strokeColor = 'black';
+		path.strokeWidth = 30;
+		path.strokeJoin = 'round';
+		path.strokeCap = 'round';
+		
+		var path = new Path([240, 250], [290, 300], [340, 250]);
+		path.strokeColor = 'black';
+		path.strokeWidth = 30;
+		path.strokeJoin = 'bevel';
+		path.strokeCap = 'square';
+		
+		var path = new Path([380, 250], [430, 300], [480, 250]);
+		path.strokeColor = 'black';
+		path.strokeWidth = 30;
+		path.strokeJoin = 'miter';
+		path.strokeCap = 'butt';
+		console.log(path.segments);
+		document.redraw();
 	</script>
 </head>
 <body>
diff --git a/examples/Tools/BezierTool.html b/examples/Tools/BezierTool.html
index 13069307..9ce0d466 100644
--- a/examples/Tools/BezierTool.html
+++ b/examples/Tools/BezierTool.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,86 +33,81 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			doc.currentStyle = {
-				strokeColor: '#4f7aff',
-				strokeWidth: 1
-			};
-			
-			var path = new Path();
-			path.style = {
-				strokeColor: 'black',
-				strokeWidth: 1
-			};
-			var currentSegment;
-			var inLine = new Path([0, 0], [0, 0]);
-			var outLine = new Path([0, 0], [0, 0]);
-			var lastInLine = new Path([0, 0], [0, 0]);
-			lastInLine.visible = false;
-			
-			var rect = new Path.Rectangle([0.5, 0.5], [4, 4]);
-			rect.fillColor = 'white';
-			var rectSymbol = new Symbol(rect);
-			
-			var circle = new Path.Circle(0, 2);
-			circle.fillColor = '#4f7aff';
-			circle.strokeColor = null;
-			var circleSymbol = new Symbol(circle);
-			var inCircle = new PlacedSymbol(circleSymbol);
-			var outCircle = new PlacedSymbol(circleSymbol);
-			var lastInCircle = new PlacedSymbol(circleSymbol);
-			inCircle.position = [-100, -100];
-			outCircle.position = [-100, -100];
-			lastInCircle.position = [-100, -100];
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		document.currentStyle = {
+			strokeColor: '#4f7aff',
+			strokeWidth: 1
+		};
+		
+		var path = new Path();
+		path.style = {
+			strokeColor: 'black',
+			strokeWidth: 1
+		};
+		var currentSegment;
+		var inLine = new Path([0, 0], [0, 0]);
+		var outLine = new Path([0, 0], [0, 0]);
+		var lastInLine = new Path([0, 0], [0, 0]);
+		lastInLine.visible = false;
+		
+		var rect = new Path.Rectangle([0.5, 0.5], [4, 4]);
+		rect.fillColor = 'white';
+		var rectSymbol = new Symbol(rect);
+		
+		var circle = new Path.Circle(0, 2);
+		circle.fillColor = '#4f7aff';
+		circle.strokeColor = null;
+		var circleSymbol = new Symbol(circle);
+		var inCircle = new PlacedSymbol(circleSymbol);
+		var outCircle = new PlacedSymbol(circleSymbol);
+		var lastInCircle = new PlacedSymbol(circleSymbol);
+		inCircle.position = [-100, -100];
+		outCircle.position = [-100, -100];
+		lastInCircle.position = [-100, -100];
 
-			var curRect;
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					if (event.count > 1) {
-						var first = lastInLine.segments.first;
-						first.point = inLine.segments.first.point;
-						var last = lastInLine.segments.last;
-						last.point = inLine.segments.last.point;
-						lastInLine.visible = true;
-						lastInCircle.position = last.point;
-					}
-					currentSegment = path.add(event.point);
-					inLine.segments.first.point = event.point;
-					outLine.segments.first.point = event.point;
-					inLine.segments.last.point = event.point;
-					outLine.segments.last.point = event.point;
-					inLine.visible = true;
-					outLine.visible = true;
-					
-					outCircle.position = event.point.round().add(0.5, 0.5);
-					inCircle.position = event.point.round().add(0.5, 0.5);
-					
-					var rect = new PlacedSymbol(rectSymbol);
-					rect.position = event.point.round().add(0.5, 0.5);
-					
-					curRect = new Path.Rectangle([0.5, 0.5], [4, 4]);
-					curRect.position = event.point.round();
-					curRect.fillColor = '#4f7aff';
-					curRect.strokeWidth = 0;
-				},
-				
-				onMouseDrag: function(event) {
-					var delta = event.point.subtract(event.downPoint);
-					currentSegment.handleOut = delta;
-					currentSegment.handleIn = delta.multiply(-1);
-					outLine.segments.last.point = currentSegment.handleIn.add(event.downPoint);
-					inLine.segments.last.point = currentSegment.handleOut.add(event.downPoint);
-					outCircle.position = outLine.segments.last.point;
-					inCircle.position = inLine.segments.last.point;
-				},
-				
-				onMouseUp: function(event) {
-					curRect.remove();
-				}
-			});
+		var curRect;
+		function onMouseDown(event) {
+			if (event.count > 1) {
+				var first = lastInLine.segments.first;
+				first.point = inLine.segments.first.point;
+				var last = lastInLine.segments.last;
+				last.point = inLine.segments.last.point;
+				lastInLine.visible = true;
+				lastInCircle.position = last.point;
+			}
+			currentSegment = path.add(event.point);
+			inLine.segments.first.point = event.point;
+			outLine.segments.first.point = event.point;
+			inLine.segments.last.point = event.point;
+			outLine.segments.last.point = event.point;
+			inLine.visible = true;
+			outLine.visible = true;
+			
+			outCircle.position = event.point.round() + [0.5, 0.5];
+			inCircle.position = event.point.round() + [0.5, 0.5];
+			
+			var rect = new PlacedSymbol(rectSymbol);
+			rect.position = event.point.round() + [0.5, 0.5];
+			
+			curRect = new Path.Rectangle([0.5, 0.5], [4, 4]);
+			curRect.position = event.point.round();
+			curRect.fillColor = '#4f7aff';
+			curRect.strokeWidth = 0;
+		}
+			
+		function onMouseDrag(event) {
+			var delta = event.point - event.downPoint;
+			currentSegment.handleOut = delta;
+			currentSegment.handleIn = -delta;
+			outLine.segments.last.point = currentSegment.handleIn + event.downPoint;
+			inLine.segments.last.point = currentSegment.handleOut + event.downPoint;
+			outCircle.position = outLine.segments.last.point;
+			inCircle.position = inLine.segments.last.point;
+		}
+			
+		function onMouseUp(event) {
+			curRect.remove();
 		}
 	</script>
 </head>
diff --git a/examples/Tools/Circles.html b/examples/Tools/Circles.html
index 26fc9797..bb8adc4d 100644
--- a/examples/Tools/Circles.html
+++ b/examples/Tools/Circles.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,25 +33,20 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
 			var path;
-			var tool = new Tool({
-				onMouseDrag: function(event) {
-					if (path) path.remove();
-					var distance = event.downPoint.subtract(event.point).length;
-					path = new Path.Circle(event.downPoint, distance);
-					path.strokeColor = 'black';
-					path.fillColor = 'white';
-				},
-				
-				onMouseUp: function(event) {
-					path = null;
-				}
-			});
-		}
+			function onMouseDrag(event) {
+				if (path) path.remove();
+				var distance = (event.downPoint - event.point).length;
+				path = new Path.Circle(event.downPoint, distance);
+				path.strokeColor = 'black';
+				path.fillColor = 'white';
+			};
+
+			function onMouseUp(event) {
+				path = null;
+			}
 	</script>
 </head>
 <body>
diff --git a/examples/Tools/Clouds.html b/examples/Tools/Clouds.html
index 7d6abd74..1efa02ca 100644
--- a/examples/Tools/Clouds.html
+++ b/examples/Tools/Clouds.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,26 +33,21 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			var path;
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					path = new Path();
-					path.strokeColor = 'black';
-					path.strokeWidth = 5;
-					path.strokeJoin = 'round';
-					path.strokeCap = 'round';
-					path.add(event.point);
-				},
-				onMouseDrag: function(event) {
-					path.arcTo(event.point, true);
-				}
-			});
-			tool.minDistance = 30;
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var path;
+		function onMouseDown(event) {
+			path = new Path();
+			path.strokeColor = 'black';
+			path.strokeWidth = 5;
+			path.strokeJoin = 'round';
+			path.strokeCap = 'round';
+			path.add(event.point);
 		}
+		function onMouseDrag(event) {
+			path.arcTo(event.point, true);
+		}
+		tool.minDistance = 30;
 	</script>
 </head>
 <body>
diff --git a/examples/Tools/Dripping Brush.html b/examples/Tools/Dripping Brush.html
index 043864d1..fbf22cc3 100644
--- a/examples/Tools/Dripping Brush.html	
+++ b/examples/Tools/Dripping Brush.html	
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,72 +33,65 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			
-			var path;
-			var minSize = 5;
-			
-			var tool = new Tool({
-				onMouseDrag: function(event) {
-					// If the user dragged more then minSize:
-					if (event.delta.length > minSize) {
-						// If there is no path, make one:
-						if (!path) {
-							path = new Path();
-							path.fillColor = 'black';
-							path.add(event.lastPoint);
-						}
-
-						var step = event.delta.divide(2);
-						step.angle = step.angle + 90;
-
-						// The top point: the middle point + the step rotated by 90 degrees:
-						//   -----*
-						//   |
-						//   ------
-						var top = event.middlePoint.add(step);
-
-						// The bottom point: the middle point - the step rotated by 90 degrees:
-						//   ------
-						//   |
-						//   -----*
-						var bottom = event.middlePoint.subtract(step);
-
-						path.add(top);
-						path.insert(0, bottom);
-						path.smooth();
-					} else {
-						// If the user dragged too slowly:
-
-						// If there is currently a path, close it
-						if (path) {
-							path.add(event.point);
-							path.closed = true;
-							path.smooth();
-
-							// Set path to null (nothing) so the path check above
-							// will force a new path next time the user drags fast enough:
-							path = null;
-						}
-					}
-				},
-				
-				onMouseUp: function(event) {
-					if (path) {
-						path.add(event.point);
-						path.closed = true;
-						path.smooth();
-
-						// Set path to null (nothing) so the path check above
-						// will force a new path next time the user drags fast enough:
-						path = null;
-					}
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var path;
+		var minSize = 5;
+		tool.maxDistance = 20;
+		function onMouseDrag(event) {
+			// If the user dragged more then minSize:
+			if (event.delta.length > minSize) {
+				// If there is no path, make one:
+				if (!path) {
+					path = new Path();
+					path.fillColor = 'black';
+					path.add(event.lastPoint);
 				}
-			});
-			tool.maxDistance = 20;
+
+				var step = event.delta / 2;
+				step.angle = step.angle + 90;
+
+				// The top point: the middle point + the step rotated by 90 degrees:
+				//   -----*
+				//   |
+				//   ------
+				var top = event.middlePoint + step;
+
+				// The bottom point: the middle point - the step rotated by 90 degrees:
+				//   ------
+				//   |
+				//   -----*
+				var bottom = event.middlePoint - step;
+
+				path.add(top);
+				path.insert(0, bottom);
+				path.smooth();
+			} else {
+				// If the user dragged too slowly:
+
+				// If there is currently a path, close it
+				if (path) {
+					path.add(event.point);
+					path.closed = true;
+					path.smooth();
+
+					// Set path to null (nothing) so the path check above
+					// will force a new path next time the user drags fast enough:
+					path = null;
+				}
+			}
+		}
+	
+		function onMouseUp(event) {
+			if (path) {
+				path.add(event.point);
+				path.closed = true;
+				path.smooth();
+
+				// Set path to null (nothing) so the path check above
+				// will force a new path next time the user drags fast enough:
+				path = null;
+			}
 		}
 	</script>
 </head>
diff --git a/examples/Tools/Fancy Brush.html b/examples/Tools/Fancy Brush.html
index 171c7658..f3f3c852 100644
--- a/examples/Tools/Fancy Brush.html	
+++ b/examples/Tools/Fancy Brush.html	
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,79 +33,75 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			
-			var path;
-			var strokeEnds = 6;
-			
-			////////////////////////////////////////////////////////////////////////////////
-			// Mouse handling
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		////////////////////////////////////////////////////////////////////////////////
+		// This script belongs to the following tutorial:
+		//
+		// http://scriptographer.org/tutorials/geometry/working-with-mouse-vectors/#adding-brush-stroke-ends
 
-			var lastPoint;
-			
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					path = new Path();
-					path.fillColor = event.count % 2 ? 'red' : 'black';
-				},
+		tool.fixedDistance = 80;
 
-				onMouseDrag: function(event) {
-					// If this is the first drag event,
-					// add the strokes at the start:
-					if (event.count == 1) {
-						addStrokes(event.middlePoint, event.delta.multiply(-1));
-					} else {
-						var step = event.delta.divide(2);
-						step.angle = step.angle + 90;
+		var path;
+		var strokeEnds = 6;
 
-						// The top point: the middle point + the step rotated by 90 degrees:
-						//   -----*
-						//   |
-						//   ------
-						var top = event.middlePoint.add(step);
+		function onMouseDown(event) {
+			path = new Path();
+			path.fillColor = event.count % 2 ? 'red' : 'black';
+		}
 
-						// The bottom point: the middle point - the step rotated by 90 degrees:
-						//   ------
-						//   |
-						//   -----*
-						var bottom = event.middlePoint.subtract(step);
+		var lastPoint;
+		function onMouseDrag(event) {
+			// If this is the first drag event,
+			// add the strokes at the start:
+			if (event.count == 1) {
+				addStrokes(event.middlePoint, event.delta * -1);
+			} else {
+				var step = event.delta / 2;
+				step.angle += 90;
 
-						path.add(top);
-						path.insert(0, bottom);
-					}
-					path.smooth();
+				// The top point: the middle point + the step rotated by 90 degrees:
+				//   -----*
+				//   |
+				//   ------
+				var top = event.middlePoint + step;
 
-					lastPoint = event.middlePoint;
-				},
-				
-				onMouseUp: function(event) {
-					var delta = event.point.subtract(lastPoint);
-					delta.length = tool.maxDistance;
-					addStrokes(event.point, delta);
-					path.closed = true;
-					path.smooth();
-				}
-			});
-			
-			function addStrokes(point, delta) {
-				var step = delta.rotate(90);
-				var strokePoints = strokeEnds * 2 + 1;
-				point = point.subtract(step.divide(2));
-				step = step.divide(strokePoints - 1);
-				for (var i = 0; i < strokePoints; i++) {
-					var strokePoint = point.add(step.multiply(i));
-					var offset = delta.multiply(Math.random() * 0.3 + 0.1);
-					if (i % 2) {
-						offset = offset.multiply(-1);
-					}
-					strokePoint = strokePoint.add(offset);
-					path.insert(0, strokePoint);
-				}
+				// The bottom point: the middle point - the step rotated by 90 degrees:
+				//   ------
+				//   |
+				//   -----*
+				var bottom = event.middlePoint - step;
+
+				path.add(top);
+				path.insert(0, bottom);
+			}
+			path.smooth();
+
+			lastPoint = event.middlePoint;
+		}
+
+		function onMouseUp(event) {
+			var delta = event.point - lastPoint;
+			delta.length = tool.maxDistance;
+			addStrokes(event.point, delta);
+			path.closed = true;
+			path.smooth();
+		}
+
+		function addStrokes(point, delta) {
+			var step = delta.rotate(90);
+			var strokePoints = strokeEnds * 2 + 1;
+			point -= step / 2;
+			step /= strokePoints - 1;
+			for(var i = 0; i < strokePoints; i++) {
+				var strokePoint = point + step * i;
+				var offset = delta * (Math.random() * 0.3 + 0.1);
+				if (i % 2) {
+					offset *= -1;
+				}
+				strokePoint += offset;
+				path.insert(0, strokePoint);
 			}
-			tool.fixedDistance = 80;
 		}
 	</script>
 </head>
diff --git a/examples/Tools/Grid.html b/examples/Tools/Grid.html
index 39f4f15f..0e80cb12 100644
--- a/examples/Tools/Grid.html
+++ b/examples/Tools/Grid.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,35 +33,37 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			
-			var values = { size: 10 };
-			
-			var point, path;
-			
-			function getPos(pt) {
-				return (pt.divide(values.size)).round().multiply(values.size);
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		/////////////////////////////////////////////////////////////////////
+		// Values
+
+		tool.fixedDistance = 10;
+
+		var values = { size: tool.fixedDistance };
+
+		/////////////////////////////////////////////////////////////////////
+		// Mouse handling
+
+		var point, path;
+
+		function getPos(pt) {
+			return (pt / values.size).round() * values.size;
+		}
+
+		function onMouseDown(event) {
+			point = getPos(event.point);
+			path = new Path();
+			path.strokeColor = 'black';
+			path.add(point);
+		}
+
+		function onMouseDrag(event) {
+			var p = getPos(event.point);
+			if (point != p) {
+				path.add(p);
+				point = p;
 			}
-			
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			var point, path;
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					point = getPos(event.point);
-					path = new Path();
-					path.strokeColor = 'black';
-					path.add(point);
-				},
-				onMouseDrag: function(event) {
-					var p = getPos(event.point);
-					if (!point.equals(p)) {
-						path.add(p);
-						point = p;
-					}
-				}
-			});
 		}
 	</script>
 </head>
diff --git a/examples/Tools/Wave.html b/examples/Tools/Wave.html
index 466e3aab..602c59f6 100644
--- a/examples/Tools/Wave.html
+++ b/examples/Tools/Wave.html
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,37 +33,40 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			var values = {
-				curviness: 0.5,
-				distance: 10,
-				offset: 10,
-				mouseOffset: true
-			};
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		//////////////////////////////////////////////////////////////////////
+		// Values
 
-			var path;
-			var mul = 1;
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					path = new Path();
-					path.strokeColor = 'black';
-				},
+		tool.minDistance = 10;
 
-				onMouseDrag: function(event) {
-					var step = event.delta.rotate(90 * mul);
-					if (!values.mouseOffset)
-						step.length = values.offset;
-					var segment = new Segment(event.point.add(step));
-					segment.handleIn = event.delta.multiply(-values.curviness);
-					segment.handleOut = event.delta.multiply(values.curviness);
-					path.add(segment);
-					mul *= -1;
-				}
-			});
-			tool.fixedDistance = 10;
+		var values = {
+			curviness: 0.5,
+			distance: tool.minDistance,
+			offset: 10,
+			mouseOffset: true
+		};
+
+		//////////////////////////////////////////////////////////////////////
+		// Mouse handling
+
+		var path;
+		function onMouseDown(event) {
+			path = new Path();
+		}
+
+		var mul = 1;
+		function onMouseDrag(event) {
+			var step = event.delta.rotate(90 * mul);
+
+			if (!values.mouseOffset)
+				step.length = values.offset;
+
+			var segment = new Segment(event.point + step);
+			segment.handleIn = -event.delta * values.curviness;
+			segment.handleOut = event.delta * values.curviness;
+			path.add(segment);
+			mul *= -1;
 		}
 	</script>
 </head>
diff --git a/examples/Tools/Worm Farm.html b/examples/Tools/Worm Farm.html
index 0f00143e..87ab38ef 100644
--- a/examples/Tools/Worm Farm.html	
+++ b/examples/Tools/Worm Farm.html	
@@ -4,6 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
 	<script type="text/javascript" src="../../lib/bootstrap.js"></script>
+	<script type="text/javascript" src="../../lib/parse-js.js"></script>
 	<script type="text/javascript" src="../../src/Paper.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/tool/ToolHandler.js"></script>
@@ -32,76 +33,78 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script>
-		window.onload = function() {
-			var canvas = document.getElementById('canvas');
-			var doc = new Document(canvas);
-			
-			var values  = {
-				minDistance: 30,
-				varyThickness: true
-			};
+	<script type="text/javascript" src="../../src/util/PaperScript.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		/////////////////////////////////////////////////////////////////////
+		// Values
 
-			////////////////////////////////////////////////////////////////////////////////
-			// Mouse handling
+		var values  = {
+			minDistance: 10,
+			varyThickness: true
+		};
 
-			var worm;
-			
-			var tool = new Tool({
-				onMouseDown: function(event) {
-					worm = new Path();
-					worm.fillColor = '#ffffff';
-					worm.strokeColor = '#000000';
-					worm.add(event.point);
-				},
+		/////////////////////////////////////////////////////////////////////
+		// Mouse handling
 
-				onMouseDrag: function(event) {
-					// the vector in the direction that the mouse moved
-					var step = event.delta;
+		tool.minDistance = values.minDistance;
 
-					// if the vary thickness checkbox is marked
-					// divide the length of the step vector by two:
-					if (values.varyThickness) {
-						step.length = step.length / 2;
-					} else {
-						// otherwise set the length of the step vector to half of minDistance
-						step.length = values.minDistance / 2;
-					}
+		var worm;
 
-					// the top point: the middle point + the step rotated by -90 degrees
-					//   -----*
-					//   |
-					//   ------
-					var top = event.middlePoint.add(step.rotate(-90));
+		// Every time the user clicks the mouse to drag we create a path
+		// and when a user drags the mouse we add points to it
+		function onMouseDown(event) {
+			worm = new Path();
+			worm.fillColor = '#ffffff';
+			worm.strokeColor = '#000000';
+			worm.add(event.point);
+		}
 
-					// the bottom point: the middle point + the step rotated by 90 degrees
-					//   ------
-					//   |
-					//   -----*
-					var bottom = event.middlePoint.add(step.rotate(90));
+		function onMouseDrag(event) {
+			// the vector in the direction that the mouse moved
+			var step = event.delta;
 
-					// add the top point to the end of the path
-					worm.add(top);
+			// if the vary thickness checkbox is marked
+			// divide the length of the step vector by two:
+			if (values.varyThickness) {
+				step.length = step.length / 2;
+			} else {
+				// otherwise set the length of the step vector to half of
+				// minDistance
+				step.length = values.minDistance / 2;
+			}
 
-					// insert the bottom point in the beginning of the path
-					worm.insert(0, bottom);
+			// the top point: the middle point + the step rotated by -90
+			// degrees
+			//   -----*
+			//   |
+			//   ------
+			var top = event.middlePoint + step.rotate(-90);
 
-					// make a new line path from top to bottom
-					var line = new Path.Line(top, bottom);
-					line.strokeColor = '#000000';
+			// the bottom point: the middle point + the step rotated by 90
+			// degrees
+			//   ------
+			//   |
+			//   -----*
+			var bottom = event.middlePoint + step.rotate(90);
 
-					// smooth the segments of the path
-					worm.smooth();
-				},
-				
-				onMouseUp: function(event) {
-					worm.closed = true;
-					worm.add(event.point);
-					worm.smooth();
-				}
-			});
-			tool.fixedDistance = 3;
-			tool.minDistance = values.minDistance;
+			// add the top point to the end of the path
+			worm.add(top);
+
+			// insert the bottom point in the beginning of the path
+			worm.insert(0, bottom);
+
+			// make a new line path from top to bottom
+			var line = new Path.Line(top, bottom);
+			line.strokeColor = '#000000';
+
+			// smooth the segments of the path
+			worm.smooth();
+		}
+
+		function onMouseUp(event) {
+			worm.closed = true;
+			worm.add(event.point);
+			worm.smooth();
 		}
 	</script>
 </head>