canvas-sketch VS canvas-engines-comparison

I believe mattdesl/canvas-sketch has some tools to help export a p5 sketch as svg. I haven't used it for that purpose yet but if I was going to try it, this is where I would start.

I know people have gotten p5 to run in canvas-sketch and that canvas-sketch has the capability to output svg

The basics: I generated this plot via a program I wrote. That program was written in Javascript, using the p5.js library for drawing lines and stuff, and canvas-sketch to generate the SVG for plotting. I passed the SVG through vpype to merge & sort the lines, and then connected to the AxiDraw using saxi. Not knowing where you're at, those are a good choice to get started—Javascript is an okay language, and p5.js is really good for just getting stuff appearing on the page. And you can just start with the first 2, and add vpype and saxi later.

Yep! Using it wrapped with Matt DesLauriers' canvas-sketch, which I've found really useful for local development, especially exporting.

With canvas-sketch[1] you hit a keystroke when you see a generation you like, and it runs git commit, captures a print resolution output, and exports it as a file tagged with git hash and optional PRNG seed suffix. This way you can reproduce exactly a generative artwork from years ago, without the hassle of manual git/shell commands, and with any file/image viewer.

[1] - https://github.com/mattdesl/canvas-sketch/blob/master/docs/e...

Another way to get svgs out of p5js is to use canvas-sketch (https://github.com/mattdesl/canvas-sketch) but i have been having a few other issues with that and haven't integrated it into my workflow yet.

If you want to get your hands dirty, I'd recommend canvas-sketch by MattDesl. It's a nice all-in-one package for a sort of 'visual REPL'.

Previously, I used canvas-sketch which is also really nice.

Made with canvas-sketch (highly recommended - it makes exporting GIFs a piece of cake)

Hey there,

If a focus is on performance, would you consider doing a side-by-side with other similar libs?

This benchmark was posted on HN a few years back, for example: https://benchmarks.slaylines.io/ (from https://news.ycombinator.com/item?id=23083730)

Or something like the bunnymarks for Pixi (https://www.goodboydigital.com/pixijs/bunnymark/) and Konva (https://konvajs.org/docs/sandbox/Jumping_Bunnies.html)

----------

In general, your lib reminds me a lot of Konva. I found their examples page to be really helpful in illustrating higher-level usage: https://konvajs.org/docs/sandbox/index.html

Maybe real-world use cases like that could be helpful for yours too? As it is, the readme doesn't make it super clear why it's preferable to any of the other existing libs yet. There are already so many, each with strengths and weaknesses... what sets yours apart?

For example, I don't know why "rendering to both Canvas and SVG" is a selling point in particular. Are there platform-specific reasons (native?) to prefer one over the other, as opposed to whatever a particular lib's implementation might be? Is there a use case where mixing and matching the two might be helpful?

There's lots of JS canvas libraries around which you can experiment with to find one that suits your preferred working practices. Some of them support TS coding, and embedding in various frameworks eg React. See this GitHub repo which includes links to various libraries.

There's links to lots of canvas libraries here: https://github.com/slaylines/canvas-engines-comparison

You can find links to a bunch of 2D Canvas libraries here: https://github.com/slaylines/canvas-engines-comparison - most of them will be able to meet the requirements you've outlined, though they each have their own approach to doing things (with consequent learning curves).

You can play around with something https://benchmarks.slaylines.io/ to see which libraries perform the best. But in the end, I think we're stuck with poor MacOS performance until either Google invests in the Metal API for Chrome (unlikely), or Apple invests in Safari's WebGL support (more likely, but still not great).

Can I ask where you got your list of JS graphics/canvas libraries to review?

Discovery is the biggest issue facing any JS canvas library developer - and after ten years I still haven't worked out how to crack that problem.

I won't link to my library here (because: this is a Vector.js thread). Instead I'll link to the Slaylines canvas benchmark test site[1] which includes a good range of libraries.

[1] https://benchmarks.slaylines.io/

Here's a comparison site for some canvas libraries.

For a canvas-based solution, you can look at creating a canvas element behind the box and animating your arm/hand icon to the cursor position using the JS canvas library of your choice.

According to this benchmark (https://benchmarks.slaylines.io/), Pixi is the fastest, however, I dislike its API since I have to go through the hassle of creating sprites and hierachies and other fluff, it gets in my way since I've already implemented this stuff my own way using a different architecture.

The Slaylines website includes a speed comparison demo of various canvas (and SVG) JS libraries performing a simple task. This should give you an overview of the main libraries out there. You can find links to all these libraries in the demo's GitHub repository.