How to flip a Circle horizontally using FabricJS?

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

Syntax

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

Parameters

• options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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. It allows us to flip an object horizontally.

Example 1

Passing flipX as key with a 'false' value

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

   
      
      
   

   
      
How to flip a Circle horizontally using FabricJS?
      
Here the circle has not flipped horizontally as we have set flipX as False. 
      

      
   

Example 2

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

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

   
      
      
   

   
      
How to flip a Circle horizontally using FabricJS?
      
Here, notice that the circle has flipped horizontally (see the gradient) because we have set flipX as True.