When comparing ZIM vs Paths.js, the Slant community recommends Paths.js for most people. In the question“What are the best JavaScript drawing libraries?” Paths.js is ranked 21st while ZIM is ranked 29th. The most important reason people chose Paths.js is:
Can be used together with a template engine such as Mustache or Handlebars to display SVG graphics or instead of a static template engine, you can use a data binding or MVC/MV* library, such as Ractive.js, Angular, Mithril or Facebook React.
Ranked in these QuestionsQuestion Ranking
Pros
Pro ZIM lets you write less code
Here is a chart of examples showing ZIM at 37% less code the developer writes when compared to other frameworks such as PixiJS, Flutter, CreateJS, PaperJS, P5js, Phaser and the DOM.
Pro ZIM supports chaining
It is quite common in ZIM to not even store an object in a variable as chaining is available for almost all methods and there are short chainable methods for most properties.
new Circle().center().drag();
new Rectangle()
.loc(100,100)
.alp(0) // alpha
.animate({x:200, alpha:1}, .5);
Pro ZIM has dynamic parameters
new Tile(new Circle(20, series(red, blue, green), 10, 10).center();
// tiles 10x10 circles with colors is series of red, blue or green
new Emitter([new Circle(), new Rectangle()]).center();
// emits random circles and rectangles
interval({min:1, max:3}, ()=>{});
// each interval is between 1 and 3 seconds
So passing in a series lets you pick in order, passing in an array lets you pick randomly, passing in a min/max range picks from the range, passing in a function picks the result of the function. These can be applied to all styles too.
Pro ZIM has Style on the Canvas
Style = {
color:red,
Button:{
color:blue;
}
}
new Circle().center(); // red
new Button().center(); // blue
Pro The ZIM DUO technique of providing regular parameters or a configuration object literal is very handy.
For instance:
new Rectangle(100,100,undefined,undefined,undefined,20).center();
or
new Rectangle({width:100, height:100, corner:20}).center();
Pro Just helps building graphs, complements template engines or data-binding libraries
Can be used together with a template engine such as Mustache or Handlebars to display SVG graphics or instead of a static template engine, you can use a data binding or MVC/MV* library, such as Ractive.js, Angular, Mithril or Facebook React.
Pro 3 APIs for the price of one
3 APIs of increasing abstraction:
- Low-level (svg paths)
- Basic shapes (Polygon, Rectangle, Bezier, Sector, Connector etc..)
- Basic graphs (Pie, bar, stock, radar, tree, waterfall, sankey etc...)
There is no magic, you can have as much control as you want on how you define your graphs, source code very readable.
Pro Lightweight
18kb minified.