Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Clipping Area on a Polygon Using Fabric.js
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.
A clipping path restricts the area to which fill or stroke is applied in a Polygon object. Therefore, the parts of the polygon which lie outside the clipping path, will not be drawn. In order to add a clipping area we use the clipPath property.
Syntax
new fabric.Polygon(points: Array, { clipPath: fabric.Object }:Object)
Parameters
points ? This parameter accepts an Array which denotes the array of points that make up the polygon object where each point is an object with x and y.
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 of which clipPath is a property.
Options Keys
clipPath ? This property accepts a fabric.Object which defines the clipping area with its shape.
Example 1: Using the clipPath Property
Let's see a code example of how we can use the clipPath property to clip two polygons. Here, we have initiated two polygons, the first instance being a hexagon, whereas the second instance is a regular square which is a polygon with four sides.
Since we have passed the clipPath property, the hexagon object, only the area inside it will be visible.
<!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>Using the clipPath property</h2>
<p>You can see only the area inside the hexagon is visible</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polygon object
var hexagon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
top: -60,
left: -40,
}
);
// Creating a points array
var points = [
{ x: 0, y: 200 },
{ x: 200, y: 200 },
{ x: 200, y: 0 },
{ x: 0, y: 0 },
];
// Initiating another polygon object
var polygon = new fabric.Polygon(points, {
fill: "blue",
clipPath: hexagon,
});
// Adding it to the canvas
canvas.add(polygon);
</script>
</body>
</html>
Example 2: Using clipPath to Clip a Rectangle Object with a Polygon
Let's see a code example to see how we can clip a rectangle object with a polygon object. After initiating a rectangle object, we have passed the clipPath property, the polygon instance. Because of this, the fill colour is only applied to the area inside the polygon, which in this case is in the shape of a star.
<!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>Using clipPath to clip a rectangle object with a Polygon</h2>
<p>You can see only the area inside the polygon is visible</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Creating a points array
var points = [
{x: 350, y: 75,},
{x: 379, y: 161,},
{x: 469, y: 161,},
{x: 397, y: 215,},
{x: 423, y: 301,},
{x: 350, y: 250,},
{x: 277, y: 301,},
{x: 303, y: 215,},
{x: 231, y: 161,},
{x: 321, y: 161,},
];
// Initiating a polygon object
var polygon = new fabric.Polygon(points, {
top: -100,
left: -90,
});
// Initiating a rectangle object
var rect = new fabric.Rect({
top: 40,
left: 20,
width: 300,
height: 150,
fill: "blue",
clipPath: polygon,
});
// Adding it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Conclusion
In this tutorial, we will use two simple examples to demonstrate how you can add a clipping area on a Polygon using FabricJS.
751 Views
