How to change background color of canvas-type text using Fabric.js?


The fabric.Text is used to change the corner style of a canvas-type text. Text class of Fabric.js provides text abstraction by using the fabric.Text class, which allows us to work with text in an object-oriented way. Compared to the canvas class the Text class provides the rich functionality.

The text object contains the different properties, but to change the background color and rendering the text of canvas can be done using one of the color property i.e., textBackgroundColor. By defining the value for the color property we change the background color.

Syntax

The following is the syntax for the fabric.Text −

fabric.Text( text: string, textBackgroundColor: string);

Parameters

  • text − It is used to specify the text

  • textBackgroundColor − Specify the color of background

Example 1

In this example, we need to import the Fabric.js library using the CDN (Content Delivery Network). Let us initialize the instances of new for the Canvas and Text which are provided by the Fabric.js library and it helps to change the background color of the text using the property of textBackgroundColor and renders the text on the Canvas.

<html>
   <head>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the background color of a canvas type text</h2>
      <p> We change the background clor the canvas type text to "blue". </p>
      <canvas id="canvas" width="500" height="80""></canvas>
      <script>
         // Create the canvas for the new instance
         var canvas = new fabric.Canvas("canvas");

         // Create a new instance of a text class
         var content = new fabric.Text('Tutorialspoint', {
            textBackgroundColor: "blue"
         });

         // Rendering the content on Canvas
         canvas.add(content);
      </script>
   </body>
</html>

As we see in the example, here we used the Text class of Fabric.js to provide the text abstraction by using the fabric.Text object. Here, we changed the background color of a text by using the textBackgroundColor property of Text to change the background color of the text into blue.

Let us take another example, where we will learn how to change the background color of canvas-type text for canvas which we defined the background color.

Example 2

Initialize the new instances to the Canvas and Text, and it helps to change the background color of the text using the property of textBackgroundColor and renders the Text on the Canvas. And for the canvas we defined the background color by using the backgroundColor property of the Text class.

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the background color of a canvas type text</h2>
      <p> The background color of canvas type text is changed to pink.</p>
      <canvas id="canvas" width="450" height="100";"></canvas>
      <script>
         // Creating the canvas for the new instance
         var canvas = new fabric.Canvas("canvas");

         // Creating a new instance of a text class
         var content1 = new fabric.Text('Welcome to Tutorials point', {
            textBackgroundColor: "pink"
         });
         
         // Creating a new instance of a canvas class
         var canvas = new fabric.Canvas('canvas', {
            backgroundColor: 'yellow'
         });
         
         // Rendering the content on canvas
         canvas.add(content1);
      </script>
   </body>
</html>

As we see in the example, here we used the text class of Fabric.js to provide the text abstraction by using the fabric.Text class. Using the textBackgroundColor property of Text class we can change the color of the background for a text to pink. And by using the backgroundColor property of a Text class, we change the color of the background for a canvas to yellow.

We discussed how to change the background color of canvas-type text using Fabric.js. We have seen the two different examples here, in the first example, we used the Text class textBackgroundColor property for changing the background color of a text into a blue color.

In the second example, we used the Text class and its properties like backgroundColor, and textBackgroundColor to change the background color of a text and the color of background to the canvas.

Updated on: 21-Feb-2023

519 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements