How to add stroke to an Ellipse using FabricJS?



In this tutorial, we are going to learn how to add stroke to an Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we have to create an instance of fabric.Ellipse class and add it to the canvas. Our ellipse object can be customized in various ways like changing its dimensions, adding a background color or by changing the color of the line drawn around the object. We can do this by using the stroke property.

Syntax

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

Options Keys

  • stroke − This property accepts a String and determines the color of that object's border.

Example 1

Passing stroke as key with a hexadecimal value

Let's see an example to understand how our ellipse object appears when the stroke property is used. A hexadecimal color code starts with a "#" followed by a six-digit number representing a color. In this case, we have used "#ff4500" which is an orange-red color.

<!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>How to add stroke to an Ellipse using FabricJS?</h2>
      <p>Notice the orange-red outline which appears because we have used the "stroke" property and supplied it with a hexadecimal value "#ff4500"</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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#4169e1",
            stroke: "#ff4500",
            strokeWidth: 5,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing an rgba value to the stroke property

In this example, we will see how to assign an "rgba" value to the stroke property. We can use an RGBA value, instead of a hexadecimal color code, which stands for: red, green, blue and alpha. The alpha parameter specifies the opacity of a color. In this example, we have used the rgba value (255,69,0,0.5) which is the color orange-red with 0.5 opacity.

<!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>How to add stroke to an Ellipse using FabricJS?</h2>
      <p> Notice the outline of the ellipse. Here we have used the "stroke" property and supplied it with an "rgba" value.</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: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#4169e1",
            stroke: "rgba(255,69,0,0.5)",
            strokeWidth: 5,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Advertisements