sketch.paperjs.org | Online Code Editor for Paper.js | Editor library

I´m trying to draw an arc using mouse events with paper.js

The user must be able to draw an arc from 0 degree to 360 degree. The issue that I´m facing is that I can draw 270 degree arc but more than 270, the arc flips to another quadrant.

Start point must be located anywhere

A sketch can be found here:

http://sketch.paperjs.org/#V/0.12.7/S/nVTBjpswEP2VEZeQXYcG2l6IOFTpZQ+RVruHHkpVeR1nQSE2MoZNFPHvtbHdeCGtorWEsOf5zTyex5wDhg80SIPnPZWkCFBA+FavOywAC/KbNHSVs5zptcDbsm2yZLlcmQChTFKRMfoGj7xkMvyyXCL1zC3eSCzkCP5qYJeTxJDBsAPLIlqXglQ0POcM1DDpU/tGJmhEpJDY9a6sqjWvuNo3e6kw2c9y1s9XoAvYD/AquNR6NFLwPXVcQbczNAZ/lFtZpBBPgDWuNYe3TLEADKzLAgyV4TJyJjmvIs42vG3ohndaz65lRJachbRTHzeHsyNpT2rPsgGPaj2PjshfnbSNjtLF2WD2wnjlI0lWT6OYvVY0C7skGmYP7EnZilmz6OJRxFXxuIJ0uMq0ueun7+GEgSZZ0bBE9hzNCb7Pa08qEvSgDAodaMNeh3wTJDQC9J5e2+a8BKcIV3WBYzS8kqu1TRfYhqKyFQy8xtgJfkj9gB5H14fREe5tF95ttCTCG1tyjt5zTn85pxGnKZnjXCi9R5eFaq7X4iYZcAcjIQoys2Rhq3xKbhHnMl3kXc30D8n8Q6bdj/J/xMRJjusKb7/xn/974+11t03Um7+Z+ne+CIr3w+1sgvTnr/4P

and this is the implemented code:

I have a shape that is created using a 'for' loop. The first path has no anchors and therefore is pointy. I'm not sure if that is because it is not closed? Joined? Sketch

Hi im tryign to create a zigzag path using Path.js's onMouseDrag function but getting in to a bit of a muddle here is a sketch

and code

Im using paper.js and attempting to created function to create zizag paths. I have divided the path up in to segments, using getPointAt and now trying ad the zigzag by adding the normals sketch and code. Thanks in advance code:

I want to create a grid array of objects. And I want them to clip with the clipping mask. At the same time, all the objects in the grid should have different opacity.

Example in the Sketch.

At line 23, I set a random opacity, but when applying the mask this information will be ignored and filled with the mask color. Is it bug of the PaperJS or I'm doing it wrong?

Image: before/after

I have a path that draw a circle whose origin is in the "west" side, then I split by removing the top and bottom. Then I get three sub-paths:

1. Top-left 1/4 circle
2. Right half circle
3. Bottom-left 1/4 circle

But even visually 1 and 3 looks like a flipped 2, 1 and 3 are actually two sub-paths. How do I optimize this? I've tried smooth(), flatten() and simplify() and all not work.

Here is the sketch.

I am trying to use path.onFrame to animate the writing of a path, where segments are added during each frame. I need to be able to stop the specific frame event for that path after it is finished, without removing the path. Here is what I have:

Example

So I've been trying to make Transform functionality for drawn paths (just like photoshop). Atm with only Left and Right (X-axis).

Now I'm trying to figure out how to make so Transform Box continue resizing even if the mouse is on other side. So from this https://i.imgur.com/znlFhnD.gif to this https://i.imgur.com/2HnNZll.gif

The problem is when I try to Transform and do quick motions through the center, the points start to go off . That is because of event.delta and invert statement happening. https://i.imgur.com/2HnNZll.gif

I'm trying to make a union of relatively complex SVG like this one. I want to unite the paths that make the "HELLO" letters with the big "A" letter behind. On Inkscape, I can do this by selecting all the paths and going to Path->Union, so the paths are converted from this:

To this:

Notice how the paths making the "HELLO" letters in the center are now united with the big "A" behind them. I want to achieve the same by using paper.js, as it's the best solution I could find to make boolean operations with SVG files without poligonizing them and because I can't do this with Inkscape CLI without GUI.

I create this sketch in paper.js to load the SVG file and make a union between all the CompoundPaths and Paths hoping that would achieve the same effect, but, apparently it's not that simple, the resulting path from the sketch is: