Article Categories

Selected Reading

How to set the style of controlling corners of Ellipse using FabricJS?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to set the style of controlling corners of Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will create an instance of fabric.Ellipse class and add it to the canvas. The controlling corners of an object allow us to scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific color to it, changing its size etc. We can change the style by using the cornerStyle property.

Syntax

new fabric.Ellipse({ cornerStyle: String }: Object)

Parameters

options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, stroke width and a lot of other properties can be changed related to the object of which cornerStyle is a property.

Options Keys

cornerStyle ? This property accepts a String that allows us to specify the style of controlling corners. Accepted values are "rect" (default, square corners) and "circle" (circular corners).

Example 1: Default Rectangle Style

The following example shows the default style of controlling corners, which appears as rectangles when no cornerStyle is specified.

<!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>Setting the style of controlling corners of an Ellipse using FabricJS</h2>
      <p>Select the object and observe its controlling corners. This is the default appearance as we have not used the <b>cornerStyle</b> property.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)"
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2: Circular Corner Style

We can specify the style or appearance of the controlling corners by setting cornerStyle to "circle". This will make the controlling corners appear as circles instead of the default rectangles.

<!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>Setting the style of controlling corners of Ellipse using FabricJS</h2>
      <p>Select the object and observe the shape of its controlling corners. We have set the <b>cornerStyle</b> as circle.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)",
            cornerStyle: "circle"
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Comparison

Corner Style	Value	Appearance
Default	`"rect"`	Square/rectangular corners
Circular	`"circle"`	Round/circular corners

Key Points

The cornerStyle property only affects the visual appearance of control corners, not their functionality
Both "rect" and "circle" styles can be combined with other corner properties like cornerColor and cornerSize
This property applies to all FabricJS objects, not just ellipses

Conclusion

The cornerStyle property in FabricJS allows you to customize the appearance of control corners from the default rectangular style to circular style. This enhances the visual appeal and user experience when interacting with canvas objects.

Rahul Gurung

Updated on: 2026-03-15T23:19:00+05:30

277 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next