<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Example</title>
	<script type="text/javascript" src="../../src/Bootstrap.js"></script>
	<script type="text/javascript" src="../../src/Item.js"></script>
	<script type="text/javascript" src="../../src/PathItem.js"></script>
	<script type="text/javascript" src="../../src/Point.js"></script>
	<script type="text/javascript" src="../../src/Rectangle.js"></script>
	<script type="text/javascript" src="../../src/Size.js"></script>
	<script type="text/javascript" src="../../src/Segment.js"></script>
	<script type="text/javascript" src="../../src/PathItem.js"></script>
	<script type="text/javascript" src="../../src/Path.js"></script>
	<script type="text/javascript" src="../../src/Doc.js"></script>
	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
	<script type="text/javascript" src="../../src/Tool.js"></script>
	<script>
		window.onload = function() {
			var canvas = document.getElementById('canvas');
			var doc = new Doc(canvas);

			var tool = new Tool({
				onMouseDrag: function(event) {
					if(event.count != 1)
						doc.children.pop();
					var distance = event.downPoint.subtract(event.point).length;
					var path = new Path.Circle(event.downPoint, distance);
					path.strokeColor = 'black';
					path.fillColor = 'white';
					doc.children.push(path);
				}
			});
			tool.document = doc;
		}
	</script>
</head>
<body>
	<canvas id='canvas' width=1024 height=768></canvas>
</body>