Home >Web Front-end >JS Tutorial >How to create a textbox with background color using FabricJS?

How to create a textbox with background color using FabricJS?

WBOYforward: 2023-09-06 11:57:021614browse

如何使用 FabricJS 创建带有背景颜色的文本框？

In this tutorial, we will create a textbox with a background color using FabricJs. We can customize, stretch or move the text written in the text box. We can also customize the text itself using properties such as fontSize, fontFamily, fontStyle, fontWeight, etc. In order to create a textbox, we have to create an instance of the fabric.Textbox class and add it to the canvas. The backgroundColor property allows us to assign a color to the background of the object and the shape of the text box to be a rectangle.

Syntax

new fabric.Textbox(text: String, { backgroundColor: String }: Object)

Parameters

text - This parameter accepts a String , which is what we The text string to use. Want to display in our text box.
Options (optional) - This parameter is an object that provides additional customization of our text box. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to the text box for which backgroundColor is the property.

Options Keys

backgroundColor - This property accepts a String value, which determines background color.

Example 1

Passing backgroundColor property as key with hexadecimal value

Let’s look at one Code example to assign a background color to our text box object using a hexadecimal color value. In this example we used the hex color code "#ffe4e1" which is a very light shade of red.

<!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>Passing backgroundColor property as key with a hexadecimal value</h2>
   <p>You can see that the background colour is a very light shade of red.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Details matter, it&#39;s worth waiting to get it right.", {
         backgroundColor: "#ffe4e1",
         width: 400,
         top: 70,
         left: 110,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Example 2

Passing backgroundColor property as key with rgba value

We can use RGBA value instead of hex Color code, which stands for - red, green, blue and alpha. The alpha parameter specifies the opacity of the color. In this example we used an rgba value (0,206,209,0.4) which is a dark turquoise color with an opacity of 0.4.

<!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>Passing backgroundColor property as key with an RGBA value</h2>
   <p>You can see that the background colour is a dark turquoise colour with 0.4 opacity.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Details matter, it&#39;s worth waiting to get it right.", {
         backgroundColor: "rgba(0,206,209, 0.4)",
         width: 400,
         top: 70,
         left: 110,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

The above is the detailed content of How to create a textbox with background color using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to become a JavaScript developer?Next article：How to become a JavaScript developer?

See more