FabricJs is a simple and powerful JavaScript library for HTML5 which helps in working with HTML5 canvas objects. It is an open source library. HTML5’s native APIs to work with canvas are low level and provide limited functionalities. FabricJs helps in manipulating and animating objects in HTML5 canvas in a much powerful manner without losing the canvas state. It creates an interactive layer above HTML5 canvas which enables easier manipulation of canvas objects. It renders canvas in a much faster manner as compared to HTML5 due to use of SVG.
Features of FabricJs:
Interactivity – FabricJs enable users to interact with objects on HTML5 canvas using mouse. Interaction can be dragging object, rotating object, scaling object etc.
Paths – In FabricJs, paths represent an outline of a shape that can be stroked, filled or modified in other ways. It consists of a series of commands (move, line, curve, arc etc.) which can help in producing complex shapes.
Groups – In FabricJs, we can group multiple objects together using ‘Groups’. These objects can then be manipulated together as a single unit.
Animation – FabricJs provides powerful animation capabilities like rotate, move, shrink, grow, fade-in, fade-out etc.
Image Filters – FabricJs provides methods to apply filters to images. It provides some inbuilt filters. E.g. – Brightness, Tint, Sepia, Convulate, Grayscale, Invert, Pixelate, Noise etc. It also gives option to apply custom filter. It also give option to remove a filter from image or apply multiple filters to images.
Gradient – FabricJs provides methods to apply gradients to objects. Gradient can be applied using multiple colors as well.
Text – FabricJs supports text abstraction and enables to work with text in object oriented model. It also supports rich text which enables to change various text properties like font style, font shadow, alignment, height, background, height, multiline support etc.
Events – FabricJs is based on event driven architecture. It supports lots of events from low level hardware (mouse, keyboard) events to high level object events.
Sub-classing – FabricJs supports inheriting from existing classes. We can also create our own classes and even extend existing classes.
Free drawing – FabricJs has excellent support for free hand drawing on the canvas.
Canvas Serialization –FabricJs supports serializing canvas into object/string which can be easily transmitted or stored. FabricJs supports 3 types of serialization –
Canvas Deserialization – FabricJs supports two ways to render canvas from string –
Features of FabricJs:
Interactivity – FabricJs enable users to interact with objects on HTML5 canvas using mouse. Interaction can be dragging object, rotating object, scaling object etc.
Paths – In FabricJs, paths represent an outline of a shape that can be stroked, filled or modified in other ways. It consists of a series of commands (move, line, curve, arc etc.) which can help in producing complex shapes.
Groups – In FabricJs, we can group multiple objects together using ‘Groups’. These objects can then be manipulated together as a single unit.
Animation – FabricJs provides powerful animation capabilities like rotate, move, shrink, grow, fade-in, fade-out etc.
Image Filters – FabricJs provides methods to apply filters to images. It provides some inbuilt filters. E.g. – Brightness, Tint, Sepia, Convulate, Grayscale, Invert, Pixelate, Noise etc. It also gives option to apply custom filter. It also give option to remove a filter from image or apply multiple filters to images.
Gradient – FabricJs provides methods to apply gradients to objects. Gradient can be applied using multiple colors as well.
Text – FabricJs supports text abstraction and enables to work with text in object oriented model. It also supports rich text which enables to change various text properties like font style, font shadow, alignment, height, background, height, multiline support etc.
Events – FabricJs is based on event driven architecture. It supports lots of events from low level hardware (mouse, keyboard) events to high level object events.
Sub-classing – FabricJs supports inheriting from existing classes. We can also create our own classes and even extend existing classes.
Free drawing – FabricJs has excellent support for free hand drawing on the canvas.
Canvas Serialization –FabricJs supports serializing canvas into object/string which can be easily transmitted or stored. FabricJs supports 3 types of serialization –
- To JSON – This converts canvas object into JSON string.
- To Object – This converts canvas object into an array of point objects.
- To SVG – This converts canvas object into SVG (Scalable Vector Graphics) text format using SVG parser.
Canvas Deserialization – FabricJs supports two ways to render canvas from string –
- From JSON – This recreates the canvas from a JSON string
- From SVG – This recreates the canvas from SVG string.
No comments:
Post a Comment