Getting Started with Fabric.js in Angular 13: Creating and Editing Canvas

This JavaScript library simplifies working with HTML5 canvas in web applications with Fabric.js. It serves as an interactive platform for effortlessly creating and manipulating objects and shapes on the canvas.

We've got everything you need to integrate Fabric.js into your Angular 13 project! We'll walk you through getting started with Fabric.js in Angular 13 in this blog post.

We'll delve into the installation and setup steps and provide practical examples that demonstrate how to create and edit canvases using Fabric.js.

Installation and Setup

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

Option 1: Manual Installation

Start by downloading the Fabric.js library from the official website here.

Choose the latest version.
Create a new folder in your Angular project's directory, such as lib, and place fabric.js inside it.
Open your Angular project's angular.json file and locate the scripts array under the architect > build > options section. You can add the path to the "fabric.js" file within the "scripts" array by following this example:

"scripts": [
  "src/lib/fabric.js"
]

Save the angular.json file.

Option 2: npm Module Installation

Go to project's root directory.
Run the following command to install Fabric.js

npm install fabric

After the installation process is finished, you'll have the Fabric.js library readily accessible within your Angular 13 project.

Importing the Fabric.js Module

You can import the "fabric" module to integrate Fabric.js into your Angular 13 project.

Import fabric.js in the component typescript file:

import { fabric } from 'fabric';

Now, you're ready to utilize the capabilities of Fabric.js in your Angular project.

Hello World Example

To create a simple "Hello World" example using Fabric.js in Angular 13, you can follow these straightforward steps:

To incorporate Fabric.js into your component's HTML file, simply include a canvas element with an assigned id. Customize the dimensions of the canvas by utilizing the width and height attributes.

For example:

<canvas id="myCanvas" width="400" height="400"></canvas>

You must import the Fabric.js module as follows:

import { fabric } from 'fabric';

In your component's class, you can create a new instance of the Fabric.js canvas by referencing the canvas element using its unique id attribute.

For example:

const canvas = new fabric.Canvas('myCanvas');

Let's now incorporate a basic "Hello World" text box onto our canvas. We can achieve this by creating a new instance of fabric.Textbox and defining the desired text content, dimensions, cursor color, and position.

const text = new fabric.Textbox('Hello World', {
  width: 200,
  height: 100,
  fontSize: 24,
  cursorColor: 'blue',
  left: 50,
  top: 50
});

canvas.add(text);

Save the changes and run your Angular 13 project. You should now see the "Hello World" text box displayed on the canvas.

Editing a Canvas

Fabric.js provides a wide range of capabilities for editing and manipulating canvases. Let's explore a few examples:

Adding Shapes

To add shapes to your canvas, you can use the provided shape classes from the fabric module. Here's an example of adding a circle to the canvas:

const circle = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 100,
  top: 100
});

canvas.add(circle);

You can customize the properties of the shape, according to your requirements.

Modifying Objects

Fabric.js allows you to easily modify objects on the canvas. You can update their properties, such as position, size, or color. Here's an example of modifying the properties of a rectangle:

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, allowing you to respond to user interactions on the canvas. You can listen for events such as object selection, mouse clicks, or dragging. Here's an example of handling the object:selected event:

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

In this example, we listen for the object:selected event and log the selected object to the console.

Conclusion

Fabric.js is a remarkably potent JavaScript library that streamlines the utilization of HTML5 canvas in web applications, making it easier and more efficient to work with.

With its interactive platform, you can effortlessly create and manipulate objects and shapes on the canvas. Throughout this blog post, we have presented a comprehensive guide that will assist you in initiating your journey with Fabric.js in an Angular 13 project.

We have covered the installation and setup process, offering two options: manual installation, which involves downloading the Fabric.js library, or utilizing the convenience of the npm module. By importing the Fabric.js module into your Angular project, you gain access to its extensive features and functionality.

To kickstart your canvas creation journey, we have provided a "Hello World" example that demonstrates how to establish a basic canvas and add a text box using Fabric.js. This example serves as a solid foundation for your future canvas projects.

Additionally, we have delved into the remarkable editing capabilities of Fabric.js. You have learned how to effortlessly add shapes to your canvas, modify object properties such as position and size, and seamlessly handle events triggered by user interactions.

By harnessing the power of Fabric.js, you can unleash your creativity and build captivating, dynamic, and interactive canvases within your Angular 13 projects.

We genuinely hope that this blog post has equipped you with the knowledge and tools necessary to seamlessly integrate Fabric.js into your Angular 13 project.

Now, it's time to embark on your canvas creation journey and bring your ideas to life.

Happy coding!