How to create an Ellipse with a background color using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to create an Ellipse with background color 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. The backgroundColor property allows us to assign a color to our object's background. It is the color of the container where the ellipse lives and is rectangular in shape for ellipse.

Syntax

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

Options Keys

  • backgroundColor − This property accepts a String which determines the color of our object's background. The value can be a hexadecimal value, an rgba value or simply the name of the color which we want our background color to be.

Example 1

Passing backgroundColor property as key with a hexadecimal value

The following example demonstrates how to assign a background color to an ellipse object using a hexadecimal value of color. In this example, we have used the hex color code #d0db61 which is a dark khaki 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 create an Ellipse with a background color using FabricJS?</h2>
      <p>Observe the dark khaki color which we have applied as the background color.</p>
      <canvas id="canvas" width="700" height="300" style="margin-left: 2px"></canvas>

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

         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 180,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "#74c365",
            stroke: "#00b7eb",
            strokeWidth: 2,
            backgroundColor: "#d0db61"
         });

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

Example 2

Passing backgroundColor property as key with a rgba value

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,0,0,0.7) which is the color red with 0.7 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 create an Ellipse with a background color using FabricJS?</h2>
      <p>Observe the background color which we have applied using 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: 180,
            top: 100,
            rx: 90,
            ry: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            backgroundColor: "rgba(255,0,0,0.7)",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
         </script>
   </body>
</html>
raja
Updated on 24-May-2022 08:52:31

Advertisements