paper.js/examples/Tools/Circles.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Example</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript">var root = '../../'</script>
	<script type="text/javascript" src="../../src/load.js"></script>
	<script type="text/paperscript" canvas="canvas">
			// All newly created items will receive
			// these style properties:
			project.currentStyle = {
				fillColor: 'white',
				strokeColor: 'black'
			};

			var path;
			function onMouseDrag(event) {
				// The radius is the distance between the position
				// where the user clicked and the current position
				// of the mouse.
				var radius = (event.downPoint - event.point).length;
				path = new Path.Circle(event.downPoint, radius);
				path.removeOnDrag();
			};
	</script>
</head>
<body>
	<canvas id="canvas" resize keepalive="true"></canvas>
</body>
Update doc-type to HTML5. 2011-02-21 08:31:26 -05:00			`<!DOCTYPE html>`
Add a few mouse tool examples. 2011-02-08 07:16:43 -05:00			`<html>`
			`<head>`
			`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`
			`<title>Example</title>`
Make all examples resize to the size of the browser window. 2011-05-05 11:25:17 -04:00			`<link rel="stylesheet" href="../css/style.css">`
Clean-up loading code. 2011-03-07 20:07:26 -05:00			`<script type="text/javascript">var root = '../../'</script>`
Since Firefox does not seem to support the <base> tag for script loading, roll our own solution through the load.js calls. 2011-03-07 18:11:41 -05:00			`<script type="text/javascript" src="../../src/load.js"></script>`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`<script type="text/paperscript" canvas="canvas">`
Update Circles example. 2011-04-23 10:30:29 -04:00			`// All newly created items will receive`
			`// these style properties:`
Rename Document -> Project, DocumentView -> ProjectView, paper.document -> paper.project and paper.documents -> paper.projects, to avoid name clashing with window.document. 2011-05-16 08:33:15 -04:00			`project.currentStyle = {`
Update Circles example. 2011-04-23 10:30:29 -04:00			`fillColor: 'white',`
			`strokeColor: 'black'`
			`};`

Introduce Paper object that keeps track of documents and which documenti is active. Newly created items are automatically appended to the children list of the active document's activeLayer. 2011-02-12 10:20:10 -05:00			`var path;`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`function onMouseDrag(event) {`
Update Circles example. 2011-04-23 10:30:29 -04:00			`// The radius is the distance between the position`
			`// where the user clicked and the current position`
			`// of the mouse.`
			`var radius = (event.downPoint - event.point).length;`
			`path = new Path.Circle(event.downPoint, radius);`
Simplify Circles example. 2011-05-06 10:51:26 -04:00			`path.removeOnDrag();`
Update examples to PaperScript. 2011-03-04 06:38:38 -05:00			`};`
Add a few mouse tool examples. 2011-02-08 07:16:43 -05:00			`</script>`
			`</head>`
			`<body>`
Add keepalive attribute to canvas to tag that controls wether it animates in background in emulated requestAnimationFrame() function, and use it in all example files. 2011-05-14 06:04:02 -04:00			`<canvas id="canvas" resize keepalive="true"></canvas>`
Add a few mouse tool examples. 2011-02-08 07:16:43 -05:00			`</body>`