search

Home >Web Front-end >JS Tutorial >How to set the fill color of an ellipse using FabricJS?

How to set the fill color of an ellipse using FabricJS?

PHPz
PHPzforward
2023-08-24 14:37:141399browse

How to set the fill color of an ellipse using FabricJS?

In this tutorial, we will learn how to change the appearance of an Ellipse object by changing its fill color using FabricJS. The oval is one of the various shapes provided by FabricJS. In order to create an ellipse, we must create an instance of the Fabric.Ellipse class and add it to the canvas. We can change the fill color using the fill property, which allows us to specify the fill color of an object.

Syntax

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

Parameters

  • Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object for which fill is the property.

Option Key

  • Padding - This property accepts characters The string Strong> value allows us to change the fill color of the object. Its default value is rgb(0,0,0), which is black.

Example 1

Default FillThe color of the ellipse object

Let's look at a piece of code that displays the default fill color of an ellipse object in FabricJS. If we completely skip the fill property when creating the ellipse object, it will be rendered black. 

<!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 set the fill color of Ellipse using FabricJS?</h2>
      <p>Observe the ellipse is rendered black as we have not applied the <b>fill</b> property. This is the default fill color. </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,
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

Example 2

Pass fill attribute as key

We can also assign any color name to the fill attribute or RGBA values. In this example, we assigned it the value "skyBlue", changing the fill color accordingly. 

<!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 set the fill color of Ellipse using FabricJS?</h2>
      <p>Here we have used the <b>fill</b> property and used skyBlue color.</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: "skyBlue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

The above is the detailed content of How to set the fill color of an ellipse using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

字符串 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：FabricJS - How to move a Line object one step up in the draw object stack?Next article：FabricJS - How to move a Line object one step up in the draw object stack?

Related articles

See more