ZIM provides conveniences, components and controls for the Canvas.


The code for dragging a circle in ZIM is as follows:

new Circle(100, "plum").center().drag();

This creates a draggable plum circle with radius of 100 and centers it on the stage.

ZIM methods are chainable as shown above. This is the same as:

const circle = new Circle(100, "plum");

For methods to be chainable they must return the object they are placed on which is what the ZIM methods do when possible.


Here is how you can apply transformation tools to any display object:

new Rectangle(200, 200, frame.blue).center().transform();

These can be saved and there are many parameter options.


ZIM Blobs and Squiggles have Bezier points which can be customized, saved and animated.

new Blob().center();


The ZIM animate() method is very powerful yet simple:

new Triangle(300,300,300,frame.orange).animate({scale:2}, 1000);

This codepen is a little more complex and makes use of the ZIM DUO technique to specify parameters with a single configuration object. See the code.

ZIM has all sorts of wonders!!! Come visit the site at http://zimjs.com and see the examples, the learn section with lots of tutorials and videos, the tips and much more!

1,446 1 16