<!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>