How to maintain stroke width of Ellipse while scaling using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to learn how we can maintain the stroke width of Ellipse while scaling using FabricJS. By default, the stroke width increases or decreases with respect to the object's scale values. However, we can disable this behaviour by using the strokeUniform property.

Syntax

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

Options Keys

  • strokeUniform − This property accepts a Boolean value which allows us to specify whether the stroke width will be scaled along with the object or not. Its default value is False.

Example 1

Default appearance of stroke width while scaling the object

The following example depicts the default appearance of the stroke width of an ellipse object that is being scaled. Since we have not used the strokeUniform property, the stroke width will also get affected by the object's scaling.

<!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 maintain stroke width of Ellipse while scaling using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</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: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
         });
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing strokeUniform property as key

In this example, we are passing the strokeUniform property as key. Therefore, the object's stroke will no longer increase or decrease with respect to the object's scaling. In this example the strokeUniform property has been assigned a "true" value and this will ensure that the stroke always matches the exact pixel size entered for stroke width.

<!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>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
      <p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied the <b>strokeUniform</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: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
            strokeUniform: true,
         });

         // 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 13:57:26

Advertisements