A Beginner’s Guide to Using Fabric.js in Angular 13: Creating and Editing Canvases

Photo by Vaishnav Vharkat on Unsplash

Fabric.js is a JavaScript library that provides a seamless experience for working with HTML5 canvas in web applications. With Fabric.js, creating and manipulating objects and shapes on the canvas becomes effortless. In this blog post, we will guide you through the process of integrating Fabric.js into your Angular 13 project.

We will cover installation and setup options and provide practical examples to help you create and edit canvases using Fabric.js.

Installation and Setup:

To begin using Fabric.js in your Angular 13 project, you have two installation options: manual installation or using the npm module.

Option 1: Manual Installation:

1. Download the latest version of Fabric.js from the official website.
2. Create a new folder in your Angular project’s directory, such as “lib,” and place the fabric.js file inside it.
3. Open your Angular project’s angular.json file and locate the scripts array under the architect > build > options section. Add the path to the fabric.js file within the “scripts” array.

Example:

“scripts”: [“src/lib/fabric.js”]

1. Save the angular.json file.

Option 2: npm Module Installation:

1. Navigate to your project’s root directory.
2. Run the command “npm install fabric” to install Fabric.js.
3. After the installation is complete, Fabric.js will be readily accessible within your Angular 13 project.

Importing the Fabric.js Module:

To integrate Fabric.js into your Angular 13 project, import the “fabric” module in your component’s TypeScript file.

Example:

import { fabric } from ‘fabric’;

Hello World Example:

Let’s create a simple “Hello World” example using Fabric.js in Angular 13.

1. In your component’s HTML file, include a canvas element with a unique id and customize its dimensions.
   Example:
   <canvas id=”myCanvas” width=”400" height=”400"></canvas>
2. Import the Fabric.js module in your component’s TypeScript file.
   Example:
   import { fabric } from ‘fabric’;
3. Create a new instance of the Fabric.js canvas by referencing the canvas element using its unique id attribute.
   Example:
   const canvas = new fabric.Canvas(‘myCanvas’);
4. Add a basic text box to the canvas by creating a new instance of fabric.Textbox and defining its properties.
   Example:
   const text = new fabric.Textbox(‘Hello World’, {
   width: 200,
   height: 100,
   fontSize: 24,
   cursorColor: ‘blue’,
   left: 50,
   top: 50
   });
   canvas.add(text);

Editing a Canvas:

Fabric.js offers a range of capabilities for editing and manipulating canvases.

Let’s explore a few examples:

Adding Shapes:

To add shapes to your canvas, use the provided shape classes from the fabric module. Customize the properties of the shape according to your requirements.

Example:
const circle = new fabric.Circle({
radius: 50,
fill: ‘red’,
left: 100,
top: 100
});
canvas.add(circle);

Modifying Objects:

Fabric.js makes it easy to modify objects on the canvas. Update their properties, such as position, size, or color, using the available methods. Example:
const rectangle = new fabric.Rect({
width: 100,
height: 50,
fill: ‘blue’,
left: 200,
top: 200
});
rectangle.set({
fill: ‘green’,
width: 150,
height: 75
});
canvas.add(rectangle);

Handling Events:

Fabric.js provides event-handling capabilities to respond to user interactions on the canvas. Listen for events such as object selection, mouse clicks, or dragging.

Example:
canvas.on(‘object:selected’, (event) => {
const selectedObject = event.target;
console.log(‘Selected object:’, selectedObject);
});

Conclusion:

Fabric.js simplifies the utilization of HTML5 canvas in web applications, enabling efficient and interactive canvas creation. In this blog post, we have provided a comprehensive guide to help you get started with Fabric.js in your Angular 13 project.

We covered the installation and setup process, offering both manual installation and npm module installation options. By importing the Fabric.js module, you gain access to its extensive features and functionality.

The “Hello World” example demonstrated how to create a basic canvas and add a text box using Fabric.js, serving as a foundation for future canvas projects.

Additionally, we explored the remarkable editing capabilities of Fabric.js, including adding shapes, modifying object properties, and handling events triggered by user interactions.

Now equipped with the knowledge and tools necessary to integrate Fabric.js into your Angular 13 project, you can unleash your creativity and build captivating, dynamic, and interactive canvases.

Embark on your canvas creation journey with Fabric.js and bring your ideas to life.

Happy coding!