Every era has its own technological breakthrough, and in today’s digital age, computer graphics plays a crucial role in shaping this advancement. Initially, web browsers were not planned for graphics applications, but were designed for rendering simple web pages with static text content. With the use of dynamic content and scripting languages, the demand for graphics support in browsers has grown immensely. This article sheds light on Fabric.js, an open-source JavaScript-based 2D graphics library that enables captivating visual effects, game design, interactive art, geometric calculations, and more. The revolution of 2D graphics in web design and its application in school education are also explored, featuring CollabGEO – an exemplary Collaborative 2D geometrical tool – developed by the Education Projects Division, NIC, adhering to National Digital Education Architecture (NDEAR) standards. Fabric.js is an open source 2D graphic library which can be used to give attractive visual effects, design games, interactive art, geometrical entities and calculation, etc. 2D graphics has brought a revolution in web design by proving scenes and animations. CollabGEO – Collaborative 2D geometrical tool developed by Education Projects Division, NIC using Fabric.js. Shashi Bhushan Deputy Director General & HoG bhushan@nic.in Guntuku Prasad Sr. Technical Director & HoD gprasad@nic.in Richa Tiwari Scientist-D richa.tiwari@nic.in Vivek Kumar Scientist-B vivek.kumar54@nic.in About HTML Canvas and Fabric.js The HTML <canvas> element allows for drawing graphics on a web page using the Canvas API in JavaScript. However, when it comes to effectively manipulating and interacting with graphical objects, this low-level API falls short. Enter Fabric.js (https://fabricjs.com), an open-source JavaScript library licensed under MIT that builds upon the HTML5 Canvas to provide a wide range of functionalities for creating and manipulating 2D graphics on the web, which involves the representation of visual elements in two dimensions: width and height. With its robust set of features and APIs, Fabric.js simplifies the process of creating stunning visual experiences, from simple to complex diagrams. Features Object oriented model Fabric.js embraces an object-oriented approach, treating each graphical element on the canvas as an object with its own methods and properties. Developers can leverage Fabric.js’s seven basic objects (fabric.Circle, fabric.Ellipse, fabric.Line, fabric.Polygon, fabric.Polyline, fabric.Rect, fabric.Triangle) or create custom objects to suit their specific needs. This model provides a structured and intuitive way to work with graphical elements. Interactivity Interactivity means the interaction with an object using a peripheral device such as mouse, keyboard, or joysticks. It is a vital aspect of 2D graphics, and Fabric.js simplifies event handling by offering a comprehensive set of event listeners. Developers can easily attach these listeners to graphical objects, enabling seamless interactions with mouse clicks, movements, and drag-and-drop actions. Fabric.js enhances the user experience by facilitating intuitive and responsive interactions. Rendering and animation Fabric.js renders graphics efficiently on the canvas. It has optimised rendering techniques, making it possible to handle a large number of graphical objects without compromising performance. Additionally, Fabric.js provides built-in methods to apply various animations as well as customised animations can also be created, enabling creation of dynamic and interactive visuals. Serialisation and Deserialization Fabric.js offers built-in support for serialising objects and their properties into JSON or SVG format. This feature allows developers to save the state of the canvas, making it easier to implement functionality like undo / redo or project saving. Deserialization allows for decoding serialised objects or saved data, effectively re-rendering or loading them in web applications. Other advanced functionality Fabric.js offers an array of advanced features that expand its capabilities. These include support for layers, grouping and ungrouping objects, image filters, clipping, masking, and text manipulation. These features provide developers with versatile tools to create intricate and highly customizable graphics effortlessly. How to use Fabric.js To start using Fabric.js, it requires to include the library in the web project by including the Fabric.js script file. This can be achieved by multiple ways. One way is to import the entire library using the <script> element. The Library’s ‘.js’ distribution file (fabric.min.js) can either be obtained from their official GitHub repository (https://github.com/fabricjs/fabric.js) or use a public CDN link such as jsDelivr. (https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js). Another way is to use a package manager such as NPM to install it as a dependency. Instructions to download and install the fabric package can be obtained from npmjs (https://www.npmjs.com/package/fabric). Application areas The world of 2D graphics offers endless possibilities for creating captivating, interactive and visually appealing experiences on the web. There are numerous areas and applications where 2D graphics come in picture such as- Image and Photo Editors, Games, Animations, Website Designers, Data Visualization, Geometry representations etc. A list of example applications can be seen at Fabric.js website (https://github.com/fabricjs/fabric.js/wiki/Who%27s-using-Fabric). Education Projects Division, NIC has also explored the capabilities of Fabric.js and developed a web-based Collaborative 2D geometry tool, CollabGEO. It aims to enhance the teaching and comprehension of geometrical concepts through collaborative interaction in real time. It will aid teachers in explaining and practising theoretical concepts for students to comprehend and solve in a virtual setting. It adheres to the NCERT curriculum for classes 6th through 10th and is adaptable to the other Indian school board curriculum. Numerous features such as Geometry creation (line, circle, ellipse, triangle, rectangle, polygon, hexagon, pentagon, octagon, parallel lines, perpendicular lines etc.), annotations and labels, Measurements (length, area, perimeter), Scaling, Transformations, Serialization and De-Serialization of objects in CGJ format, Real time collaboration among others have been offered in this application. Benefits of Fabric.js Integration with web technologies - Fabric.js seamlessly integrates with other web technologies, making it a versatile choice for web development. It can be used in combination with HTML, CSS, and JavaScript frameworks to build interactive dashboards, data visualisations, image editors, and much more. Touch devices support – Fabric.js also has support for touch events such as dragging, shaking, long pressing orientation change etc, enabling smooth interaction on touch-enabled devices. Cross-browser compatibility - Fabric.js works seamlessly across major web browsers, ensuring broad compatibility with modern browsers such as Chrome, Firefox, Safari, and Edge. Active community - Fabric.js benefits from an active and supportive community that provides help, resources, maintains comprehensive documentation, API references, guides, and tutorials. The Fabric.js project is hosted on GitHub (https://github.com/fabricjs), allowing the community to actively contribute to the library’s development. The community has created a number of extensions and plugins that extend the functionality of the library. Conclusion Fabric.js provides developers with a powerful toolset to unlock the potential of 2D graphics on the web. With its simple object model, and extensive feature set, Fabric.js enables the creation of captivating data visualisations, image editors, geometry renderings, and interactive interfaces, which are compatible with modern browsers. Contact for more details Richa Tiwari Scientist D Education Project Division, A2B3, 2nd Floor, NIC HQ CGO Complex, Lodhi Road, New Delhi - 110003 Email: richa.tiwari@nic.in, Phone: 011-24305833