kleemans.ch

FabricJS is a great library for working with the HTML Canvas. As I've used it multiple times together with Angular now, I decided to create a small starter project on Github: angular-fabricjs-starter

You can try it out right here, try to click and move an object on the canvas:

Some of the features are:

• Adding an object (e.g. a circle or a text) to the FabricJS canvas
• Event handlers, for example a callback when you select an object on the canvas. This is used to add a log entry on the bottom.
• Getting a FabricJS object and manipulating it from the Angular component
• Listening to key presses and propagating them to FabricJS

Besides this basic functionality, there are also two things I decided to add, adding Polygons by drawing them, and editing Polygons.

Drawing Polygons

Polygons can be drawn by first clicking "Draw new polyline" button, which activates the draw mode. Then, we can click on the canvas to create line segments:

With a double click on the canvas, the actual Polygon will be created, the temporary red lines will be removed and the component will exit draw mode.

After creation, the Polygon behaves like any other object on the canvas and can be moved, rotated etc.

Editing Polygons

Now another interesting use case is editing an existing Polygon, for example editing edge points. FabricJS allows to replace the default controls (which allow to scale and rotate the object) with different controls, for example to highlight all the edge points and add a control to them, so they can be grabbed and moved.

By double clicking on any orange Polygon (or by using the button), you can move its points:

Thanks for reading and happy drawing!