martyboggs/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moving Path Handles</title>
<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
	var handle;
	// Create a circle shaped path at the center of the view,
	// with a radius of 100:
	var path = new Path.Circle(view.center, 100);
	path.strokeColor = 'black';

	// Fully select the path, so we can see its handles:
	path.fullySelected = true;

	function onMouseDown(event) {
		handle = null;
		// Do a hit test on path for handles:
		var hitResult = path.hitTest(event.point, { handles: true });
		if (hitResult) {
			if (hitResult.type === 'handle-in') {
				handle = hitResult.segment.handleIn;
			} else if (hitResult.type === 'handle-out') {
				handle = hitResult.segment.handleOut;
			} else if (hitResult.type === 'segment') {
				handle = hitResult.segment.point;
			}
		}
	}

	function onMouseDrag(event) {
		// If we hit a handle before, move it:
		if (handle) {
			handle.x += event.delta.x;
			handle.y += event.delta.y;
		}
	}
</script>
</head>
<body style="margin:0;overflow:hidden">
	<canvas id="canvas" resize></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Moving Path Handles</title>
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
	var handle;
	// Create a circle shaped path at the center of the view,
	// with a radius of 100:
	var path = new Path.Circle(view.center, 100);
	path.strokeColor = 'black';

	// Fully select the path, so we can see its handles:
	path.fullySelected = true;

	function onMouseDown(event) {
	handle = null;
	// Do a hit test on path for handles:
	var hitResult = path.hitTest(event.point, { handles: true });
	if (hitResult) {
	if (hitResult.type === 'handle-in') {
	handle = hitResult.segment.handleIn;
	} else if (hitResult.type === 'handle-out') {
	handle = hitResult.segment.handleOut;
	} else if (hitResult.type === 'segment') {
	handle = hitResult.segment.point;
	}
	}
	}

	function onMouseDrag(event) {
	// If we hit a handle before, move it:
	if (handle) {
	handle.x += event.delta.x;
	handle.y += event.delta.y;
	}
	}
	</script>
	</head>
	<body style="margin:0;overflow:hidden">
	<canvas id="canvas" resize></canvas>
	</body>
	</html>