Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make a star with Polygon class using FabricJS?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc.
Syntax
new fabric.Polygon(points: Array, options: Object)
Parameters
-
points ? This parameter accepts an Array which denotes the array of points that make up the polygon object.
-
options (optional) ? This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the Polygon object.
Example 1: Default Appearance of Polygon Object
Let's see a code example of how we can draw any general polygon object. We need to specify an array of points where each point is an object with "x" and "y" properties. Specifying the array of points is crucial without which our polygon object would not be rendered onto the canvas.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of polygon object</h2>
<p>You can see that a polygon object has been added to the canvas</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 200 },
{ x: 350, y: 60 },
{ x: 500, y: 20 },
],
{
fill: "black",
stroke: "blue",
strokeWidth: 2,
}
);
// Adding it to the canvas
canvas.add(polygon);
</script>
</body>
</html>
Example 2: Creating a Star Shape
Now let's create a star using the Polygon class. A star shape requires specific coordinates to form the characteristic pointed shape. We'll define 10 points that alternate between the outer points (tips of the star) and inner points (the valleys between tips).
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Creating a Star using Polygon</h2>
<p>You can see that a star shape has been added to the canvas</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(300);
// Define star points (alternating outer and inner points)
var starPoints = [
{ x: 350, y: 75 }, // Top point
{ x: 379, y: 161 }, // Inner right
{ x: 469, y: 161 }, // Right point
{ x: 397, y: 215 }, // Inner bottom right
{ x: 423, y: 301 }, // Bottom right point
{ x: 350, y: 250 }, // Inner bottom
{ x: 277, y: 301 }, // Bottom left point
{ x: 303, y: 215 }, // Inner bottom left
{ x: 231, y: 161 }, // Left point
{ x: 321, y: 161 }, // Inner left
];
// Create the star polygon
var star = new fabric.Polygon(starPoints, {
left: 100,
top: 10,
fill: "#FFD700",
stroke: "#FF6B35",
strokeWidth: 3,
selectable: true
});
// Adding it to the canvas
canvas.add(star);
</script>
</body>
</html>
Key Properties for Star Customization
When creating a star with FabricJS Polygon, you can customize various properties:
- fill ? Sets the interior color of the star
- stroke ? Defines the border color
- strokeWidth ? Controls the border thickness
- left/top ? Positions the star on the canvas
- selectable ? Makes the star interactive for users
How Star Points Work
A five-pointed star requires 10 coordinate points that alternate between:
- Outer points ? The five tips of the star extending outward
- Inner points ? The five valleys between the star tips
The key to a well-proportioned star is maintaining proper distance ratios between these outer and inner points.
Conclusion
Creating stars with FabricJS Polygon involves defining precise coordinate arrays with alternating outer and inner points. This approach gives you complete control over the star's shape and styling properties.
758 Views
