How to flip a Rectangle vertically using FabricJS?

In this tutorial, we are going to learn how we can flip a Rectangle object vertically 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 vertically using the flipY property.

Syntax

new fabric.Rect({ flipY: 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 flipY is a property.

Options Keys

• flipY ? This property accepts a Boolean value which allows us to flip an object vertically.

Example 1

Passing flipY as key with a False value

Let?s see a code example that shows us the default orientation of a rectangle object in FabricJS. Since we are passing the flipY property a False value, the rectangle object will not be flipped vertically.

   
   


   
Passing flipY as key with a False value
   
You can see that the object has not flipped vertically.
   
   

Example 2

Passing the flipY property as key with a ?true? value

In this example, we have a rectangle object of width 170 px and height 70 px with a vertical linear gradient fill. As we apply the flipY property to the rectangle object, it flips vertically and thus we see that the gradient has flipped as well.

   
   


   
Passing the flipY property as key with a True value
   
You can see now that the object has flipped vertically.