Can anyone help me convert this paperscript to javascript?

I have this paperscript from paper.js and i would like it to be converted in javascript but i cant get the mouse drag to work.

PaperScript recognises a couple of special event handlers when they are declared as global functions, while in JavaScript, these need to be manually installed on the appropriate object.

Codepen of the paperscript

<script type="text/javascript" src=""></script> <!-- Define inlined PaperScript associate it with myCanvas --> <script type="text/paperscript" canvas="myCanvas"> var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100)); var path = new Path.Rectangle(rectangle); path.fillColor = '#e9e9ff'; path.strokeColor = 'black'; path.strokeWidth = 2; path.selected = true; path.closed = true; var hitOptions = { segments: true, stroke: true, fill: true, tolerance: 8 }; var segment, path; var movePath = false; function onMouseDown(event) { segment = path = null; var hitResult = project.hitTest(event.point, hitOptions); if (!hitResult) return; if (event.modifiers.shift) { if (hitResult.type == 'segment') { hitResult.segment.remove(); }; return; } if (hitResult) { path = hitResult.item; if (hitResult.type == 'segment') { segment = hitResult.segment; } else if (hitResult.type == 'stroke') { var location = hitResult.location; segment = path.insert(location.index + 1, event.point); //path.smooth(); } } movePath = hitResult.type == 'fill'; if (movePath) project.activeLayer.addChild(hitResult.item); } function onMouseMove(event) { project.activeLayer.selected = false; if (event.item) event.item.selected = true; } function onMouseDrag(event) { if (segment) { segment.point += event.delta; //path.smooth(); } else if (path) { path.position += event.delta; } } </script> <canvas resize></canvas> 

Thank you in advance!

1 Answer

Differences between PaperScript and JavaScript contexts are detailled here.
In order to make the less changes possible to your code, you have to:

• Install Paper.js in global scope. This allow you to use classes like Path, Point, ... directly (without passing trough global paper object).

• Setup Paper.js to use your canvas. This is equivalent to setting the PaperScript canvas attribute.

• Create a Tool instance that you will use to register your event handlers.

• Use math operator functions (like Point.add()) instead of operators (like +) when manipulating points.

Here is your code working in JavaScript context.

// expose paperjs classes into global scope paper.install(window); // bind paper to the canvas paper.setup('canvas'); var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100)); var path = new Path.Rectangle(rectangle); path.fillColor = '#e9e9ff'; path.strokeColor = 'black'; path.strokeWidth = 2; path.selected = true; path.closed = true; var hitOptions = { segments: true, stroke: true, fill: true, tolerance: 8 }; var segment, path; var movePath = false; // create a custom tool var customTool = new Tool(); // attach handlers to the tool customTool.onMouseDown = function(event) { segment = path = null; var hitResult = project.hitTest(event.point, hitOptions); if (!hitResult) { return; } if (event.modifiers.shift) { if (hitResult.type == 'segment') { hitResult.segment.remove(); } return; } if (hitResult) { path = hitResult.item; if (hitResult.type == 'segment') { segment = hitResult.segment; } else if (hitResult.type == 'stroke') { var location = hitResult.location; segment = path.insert(location.index + 1, event.point); //path.smooth(); } } movePath = hitResult.type == 'fill'; if (movePath) { project.activeLayer.addChild(hitResult.item); } }; customTool.onMouseMove = function(event) { project.activeLayer.selected = false; if (event.item) { event.item.selected = true; } }; customTool.onMouseDrag = function(event) { if (segment) { // use methods instead of operators segment.point = segment.point.add(event.delta); //path.smooth(); } else if (path) { path.position = path.position.add(event.delta); } };

html, body { margin: 0; overflow: hidden; height: 100%; } canvas[resize] { width: 100%; height: 100%; }

<script src=""></script> <canvas resize></canvas>