Path has been break apart when applying roughness = 2

[haan123]

I have a path like this:
https://jsfiddle.net/qetypnac/2/

• This is the shape when roughness = 0

generator.path(pathData, {
  "stroke": "#000000",
  "fill": "#ced4da",
  "fillStyle": "solid",
  "strokeWidth": 1,
  "roughness": 2,
  "seed": 1067011870,
  "combineNestedSvgPaths": true
})

• But when roughness = 2, the paths of eclipse inside are break apart

I don't know this is a bug a not, but is there any work around to reduce the breaking parts of eclipse?

Thanks!

[pshihn]

The path you're drawing is not drawing a circle but a series of arcs. Those arcs get more exaggerated with higher roughness. You can update your path string to have a single arc

[haan123]

Hi @pshihn,

That's an approach, but is there an API from roughjs to convert an eclipse shape to single arc path?
Because the eclipse in the above shape was generated from roughjs generator.ellipse then it was used to do subtract boolean operation with the rectangle shape:

const rectangle = generator.rectangle(...);
const path1 =  generator.toPaths(rectangle);
const ellipse = generator.ellipse(...);
const path2 = generator.toPaths(ellipse);

subtract(path1, path2);

Thank you!