How to change corner style of a canvas-type text using Fabric.js ?

Last Updated : 27 Jun, 2024

In Fabric.js, altering the corner style of canvas-type text is a practical way to customize text rendering. By adjusting parameters like corner radius and corner style, developers can achieve different visual effects, enhancing the overall design of text elements on the canvas. This functionality allows for flexibility in creating distinct text presentations tailored to specific design requirements or aesthetic preferences within web applications which are as follows:

Table of Content

Custom Corner Style of Canvas
Dafault Corner Style of Canvas

Syntax:

fabric.Text(text, cornerStyle: string);

Parameters: This function accepts two parameters as mentioned above and described below:

text: It specifies the text to be written.
corner style: It specifies the corner style which can be ‘rect’ or ‘circle’ where ‘rect’ is the default style.

Custom Corner Style of Canvas

The code initializes a Fabric.js canvas and creates a text object with customized corner styles. The cornerStyle property of the text object is set to ’round’, altering the appearance of the control corners from the default rectangular shape to a rounded shape, before adding the text to the canvas.

Example: To demonstrate using FabricJS to change corner style of canvas-like text.

html

<!DOCTYPE html>
<html>

<head>
  <title>
    How to change corner style of a
    canvas-type text with JavaScript?
  </title>

  <!-- Loading the FabricJS library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
  </script>
</head>

<body>
  <canvas id="canvas" width="600" height="200" style="border:1px solid #000000;">
  </canvas>

  <script>

    // Create a new instance of Canvas
    var canvas = new fabric.Canvas("canvas");

    // Create a new Textbox instance
    var text = new fabric.Text('GeeksforGeeks', {
      cornerStyle: 'circle'
    });

    // Render the Textbox on Canvas
    canvas.add(text);
  </script>
</body>

</html>

Output:

Dafault Corner Style of Canvas

In this example code, the default corner style of the Fabric.js canvas-type text is set to circle using the cornerStyle property when creating a new fabric.Text instance. This changes the shape of the control corners from the default rectangular style to circular, affecting how the corners appear on the text object rendered on the canvas.

Example: To demonstrate changing corner style of a canvas-type using the FabricJS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change Corner Style of Canvas-Type Text using Fabric.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>

<body>
  <h1>Change Corner Style of Canvas-Type Text using Fabric.js</h1>
  <canvas id="canvas" width="400" height="200" style="border: 1px solid #000;"></canvas>

  <script>
    var canvas = new fabric.Canvas('canvas');

    // Create text object with
    //  customized corner style
    var text = new fabric.Text('Hello Fabric.js!', {
      left: 50,
      top: 50,
      cornerStyle: 'round'
      // Options: 'rect', 'round'
    });

    canvas.add(text);
  </script>
</body>

</html>