How to add a stroke to a triangle using FabricJS?

In this tutorial, we will learn how to add a stroke to a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.

Our triangle object can be customized in many ways, such as changing its dimensions, adding a background color, or changing the color of the lines drawn around the object. We can do this by using the Stroke attribute.

Syntax

new fabric.Triangle({ stroke : String }: Object)

Parameters

• Options (optional) - This parameter is a Object< /em> Provides additional customization to our triangle. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties associated with the object for which Stroke is an attribute.

< /ul>

Options Keys

• Stroke - This property accepts a String to determine the object's border s color.

Example 1

Passing strokes as keys with hexadecimal values strong>

Let’s see A code example to see how triangle objects appear when using the lines property. Hexadecimal color codes begin with "#" followed by a six-digit number representing the color. In this case, we used "#3cb371", which is Mid-Sea Green.

<strong>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Passing stroke as key with a hexadecimal value&lt;/h2&gt;
   &lt;p&gt;You can see that the stroke around the triangle is of medium sea-green colour&lt;/p&gt;
   &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
   &lt;script&gt;
      // Initiate a canvas instance
      var canvas = new fabric.Canvas(&quot;canvas&quot;);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: &quot;#ecebbd&quot;,
         stroke: &quot;#3cb371&quot;,
         strokeWidth: 7,
      });

      // Add it to the canvas
      canvas.add(triangle);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</strong>

Example 2

Pass rgba value to StrokeAttribute

In this example we will see how Specify an rgba value for the stroke attribute. Instead of hexadecimal color codes we can use RGBA values ​​which stand for: red, green, blue and alpha. The alpha parameter specifies the opacity of the color. In this example, we used the rgba value (46,139,87,0.8), which is a sea green with an opacity of 0.8.

<strong>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Passing an rgba value to the stroke property&lt;/h2&gt;
   &lt;p&gt;You can see that the stroke colour is coming from the RGBA value now&lt;/p&gt;
   &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
   &lt;script&gt;
      // Initiate a canvas instance
      var canvas = new fabric.Canvas(&quot;canvas&quot;);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 30,
         width: 90,
         height: 80,
         fill: &quot;#ecebbd&quot;,
         stroke: &quot;rgba(46,139,87,0.8)&quot;,
         strokeWidth: 7,
      });

      // Add it to the canvas
      canvas.add(triangle);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</strong>

The above is the detailed content of How to add a stroke to a triangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!