polylinesToSVG accepts only lines?

[TheMapSmith]

Hey Matt,

I'm looking to generate pen plotter art files that includes arcs, but I must be missing something in your two --penplot examples. Both generate arrays of coordinate arrays that are passed to your polylinesToSVG() helper function. Looking at your penplot.js in canvas-sketch-util, it looks like here you just iterate through each coordinate pair and generate the relevant svg tags. Those are then handed down into a pre-baked svg template here that only allows <path ... > elements

I'm going to play around with implementing this myself, but it seems like with the relatively straightforward mapping from canvas to svg arcs, maybe #L56 earlier could be made more flexible to include <circle> svg tags without much hassle?

context.arc(375, 252, 75)

<circle cx="375" cy="252" r="75" style="fill:rgb(235,235,235);"/>

[TheMapSmith]

As a super hacky start for my own use case, instead of building up the <path with M and L commands, I instead build a <circle> for each context.arc() based on passing an arc object containing all the args for the circle

const circle = `<circle cx="${arcs[a].x}" cy="${arcs[a].y}" r="${arcs[a].r}" stroke-width="${s}" stroke="${sc}" fill="${f}"/>`;

Things not covered:

• Ellipses
• Elipsis
• Arcs that aren't 360 degrees

[mattdesl]

Yes, the 'penplot' tool is solely based on polylines at the moment to keep things simple. If you have arcs and curves, you can convert them into discrete polylines like so:

• arc-to
• adaptive-bezier-curve
• adaptive-quadratic-curve

It would be great if there was a way to support all the features of Canvas2D context, but that is a huge undertaking that would take much longer to create than all of canvas-sketch itself! :smile:

What you are doing is also fine, though. In the past I've hacked the function to support different types and attributes like so:

const svg = graphicsToSVG([
    { type: 'path', path: [ [ x, y ], ... ], fill: 'red' },
    { type: 'path', path: [ [ x1, y1 ], ... ], fill: 'blue' },
    { type: 'circle', position: [ x2, y2 ], radius: r, stroke: 'green', lineWidth: 5 } 
]);

So far I have kept these as local hacks because the API is a bit too opinionated to be put into canvas-sketch-util, and the features are too specific to my own application. Actually trying to match canvas + SVG (shapes, attributes, filters, text, clipping, etc) is just too huge of a rabbit hole to support in a utility module.