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 flip a Rectangle horizontally using FabricJS?
In this tutorial, we are going to learn how we can flip a Rectangle object horizontally using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas. We can flip a rectangle object horizontally using the flipX property.
Syntax
new fabric.Rect({ flipX: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which flipX is a property.
flipX Property
-
flipX ? This property accepts a Boolean value which allows us to flip an object horizontally. When set to
true, the rectangle is mirrored along its vertical axis. When set tofalseor omitted, the rectangle maintains its default orientation.
Example 1: Default Orientation (flipX: false)
Let's see a code example that shows us the default orientation of a rectangle object in FabricJS. Since we are passing the flipX property a false value, the rectangle object will not be flipped horizontally.
<!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>Passing flipX as key with a False value</h2>
<p>You can see that the object is not flipped horizontally</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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
borderColor: "purple",
borderScaleFactor: 3,
flipX: false,
});
// Create gradient fill
rect.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 50, y2: 0 },
colorStops: [
{ offset: 0, color: "pink" },
{ offset: 1, color: "blue" },
],
})
);
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Horizontal Flip (flipX: true)
In this example, we have a rectangle object of width 170 and height 70 with a horizontal linear gradient fill. As we apply the flipX: true property to the rectangle object, it flips horizontally and thus we see that the gradient has flipped as well.
<!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>Passing the flipX property as key with a True value</h2>
<p>You can see now that the object has flipped horizontally</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 rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
borderColor: "purple",
borderScaleFactor: 3,
flipX: true,
});
// Create gradient fill
rect.set(
"fill",
new fabric.Gradient({
type: "linear",
coords: { x1: 0, y1: 0, x2: 50, y2: 0 },
colorStops: [
{ offset: 0, color: "pink" },
{ offset: 1, color: "blue" },
],
})
);
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Differences
| Property Value | Behavior | Gradient Direction |
|---|---|---|
flipX: false |
Normal orientation | Pink to Blue (left to right) |
flipX: true |
Horizontally flipped | Blue to Pink (left to right) |
Conclusion
The flipX property in FabricJS provides a simple way to horizontally flip rectangle objects. Setting it to true mirrors the object along its vertical axis, which is particularly noticeable with gradients and asymmetric designs.
582 Views
