How to flip a Triangle horizontally using FabricJS?

In this tutorial, we are going to learn how we can flip a Triangle object horizontally using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas. We can flip a triangle object horizontally using the flipX property.

Syntax

new fabric.Triangle({ flipX: Boolean }: Object)

Parameters

• Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. 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.

Options Keys

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

Example 1

Passing flipX as key with a 'false' value

Let's see a code example that shows us the default orientation of a triangle object in FabricJS. Since we are passing the flipX property a False value, the triangle object will not be flipped horizontally.

   
   


   
Passing flipX as key with a 'False' value
   
You can see that the triangle object has not been flipped horizontally
   
   

Example 2

Passing the flipX property as key with a 'True' value

In this example, we have a triangle object of width 180px and height 109px with a horizontal linear gradient fill. As we apply the flipX property to the triangle object, it flips horizontally and thus we see that the gradient has flipped as well.

   
   


   
Passing the flipX property as key with a 'True' value
   
You can see that the triangle has been flipped horizontally