How to add polygon points and draw it on an image in fabric js (angular)

How to add polygon points and draw it on an image in Fabric.js (Angular)

If you are working with TypeScript and need to add polygon points and draw them on an image using Fabric.js in an Angular project, you’ve come to the right place. In this blog post, we will explore two solutions to achieve this goal.

Solution 1: Using Fabric.js Path Object

The first solution involves using the Fabric.js Path object to create a polygon and draw it on an image. Here’s how you can do it:

// Import necessary modules
import { fabric } from 'fabric';

// Create a Fabric.js canvas
const canvas = new fabric.Canvas('canvas');

// Load the image onto the canvas
fabric.Image.fromURL('path/to/image.jpg', (img) => {
  canvas.add(img);
});

// Create an array of polygon points
const polygonPoints = [
  { x: 100, y: 100 },
  { x: 200, y: 100 },
  { x: 200, y: 200 },
  { x: 100, y: 200 }
];

// Create a Fabric.js polygon path
const path = new fabric.Path(`M ${polygonPoints[0].x} ${polygonPoints[0].y}
  L ${polygonPoints[1].x} ${polygonPoints[1].y}
  L ${polygonPoints[2].x} ${polygonPoints[2].y}
  L ${polygonPoints[3].x} ${polygonPoints[3].y}
  Z`);

// Set the fill color and opacity of the polygon
path.set({ fill: 'rgba(255, 0, 0, 0.5)' });

// Add the polygon to the canvas
canvas.add(path);

This code snippet creates a Fabric.js canvas, loads an image onto the canvas, defines an array of polygon points, creates a polygon path using the Path object, sets the fill color and opacity of the polygon, and finally adds the polygon to the canvas. Adjust the polygon points and fill properties as per your requirements.

Solution 2: Using Fabric.js Polygon Object

The second solution involves using the Fabric.js Polygon object to directly create and draw a polygon on an image. Here’s how you can do it:

// Import necessary modules
import { fabric } from 'fabric';

// Create a Fabric.js canvas
const canvas = new fabric.Canvas('canvas');

// Load the image onto the canvas
fabric.Image.fromURL('path/to/image.jpg', (img) => {
  canvas.add(img);
});

// Create an array of polygon points
const polygonPoints = [
  { x: 100, y: 100 },
  { x: 200, y: 100 },
  { x: 200, y: 200 },
  { x: 100, y: 200 }
];

// Create a Fabric.js polygon
const polygon = new fabric.Polygon(polygonPoints, {
  fill: 'rgba(255, 0, 0, 0.5)'
});

// Add the polygon to the canvas
canvas.add(polygon);

This code snippet creates a Fabric.js canvas, loads an image onto the canvas, defines an array of polygon points, creates a polygon using the Polygon object, sets the fill color and opacity of the polygon, and finally adds the polygon to the canvas. Adjust the polygon points and fill properties as per your requirements.

Both solutions mentioned above will help you add polygon points and draw them on an image using Fabric.js in an Angular project. Choose the one that suits your needs and integrate it into your codebase.

Happy coding!