Vector.js: an open source JavaScript library for creating interactive graphics
vectorjs.org
vectorjs.org
Vector.js looks like it's maintained by a small team of university students as their capstone project. That's a cool thing to produce for a school project, for sure, but are there compelling reasons for other users to choose this lib in particular?
Just to share some findings... at work we recently evaluated the market for JS graphics libraries, and to our surprise, there were MANY good options.
At lower levels of abstractions, there was GraphicsJS, Two.js, Paper.js, D3.js.
Higher up, there was Fabric.js and Konva.
Beyond that, there are entire JS graphics engines for games and such, like Phaser.io and PixiJS. And for maps, like OpenLayers or Leaflet. And for charts, like Chart.js and Apex and Victory and Fusion. And then there was an even larger graveyard of graphics libs that seemingly were once great, but then was possibly abandoned, like Raphael or Stage.js.
It seemed like no matter what your graphics needs were, there was a particular lib that would fulfill most of it. And it also seemed like it was a problem that different teams continuously reinvented, to different degrees of success and longevity.
This is useful for pediatric growth charts, marking up pictures of teeth or rehabilitation planning and many other medical images.
I suspect that the hard part here is if you need to be able to do transforms on it, like responsive canvases when the viewport changes (but still keep the dots in the right place, for example), or if you need to compose multiple rasters on top of each other while allowing arbitrary scaling and rotation on each. The graphics lib needs to be able to maintain the relative coordinates of each one, which you can't do if you just overlay the entire canvas on top of a static HTML div.
At a higher level of abstraction, the mapping libraries (openlayers and leaflet) handle this use case very well out of the box with a virtual coordinate system. Their intended use case is to be able to overlay roads and such on top of aerial photos, but the same math can be used on any set of images and layers, not necessarily in the coordinate space of Earth. The basic idea is just that the lib needs to know where every shape is relative to each other, regardless of each shape's transform or the overall canvas size and rotation and zoom.
Whitten, if you can provide some examples (even just sketched out on a piece of paper), we can maybe suggest a few?
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.
I agree with you 100%. Our "discovery" process was just whatever we could find on npm and Google and maybe github. I'm sure we missed some, including several in that benchmark (darn).
For us though, the deciding factor ended up being less about performance and more about how easy it was to use with React and compose higher level shapes, etc. We had a shortlist of finalists that we built prototypes for.
But yeah, even finding which libs were available and still maintained was difficult. Some of them had much better SEO and marketing, but that didn't necessarily mean they were the best fit for a given use case.
Edit: Forgot to mention, there were also a bunch of blog articles. We didn't use their conclusions but we did often skim them to see if they mentioned any libs we missed. I'm not sure how those authors found the libs, but it might be worth reaching out to them too.