search

Home  >  Article  >  Web Front-end  >  How to create a canvas with text using FabricJS?

How to create a canvas with text using FabricJS?

王林
王林forward
2023-08-24 16:49:051559browse

如何使用 FabricJS 创建带有文本的画布？

In this tutorial, we will learn how to create a canvas with a Text object using FabricJS. We can display text on the canvas by adding an instance of Fabric.Text. Not only does it allow us to move, scale and change the dimensions of text, but it also provides additional features such as text alignment, text decoration, line height, which are available through the properties textAlign, underline and lineHeight respectively. One difference between Text and Textbox is that Textbox can be edited interactively, while Text cannot.

grammar

new fabric.Text( text: String , options: Object)

parameter

  • text - This parameter accepts String which is the text string we want to display as text.

  • Options (optional) - This parameter is an object that provides additional customization to our text object. Use this parameter to change the color, cursor, stroke width, and many other properties associated with the text object.

Example 1

Create an instance of Fabric.Text() and add it to the canvas

Let's look at a code example to see how to add a text object to the canvas. The only required parameter is the actual text string, while the second parameter is an optional options object that allows us to assign different properties to the text object. 

<!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>Creating an instance of fabric.Text() and adding it to our canvas</h2>
   <p>You can see the text in the canvas now</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 text object
      var text = new fabric.Text("Add sample text here", {
         left: 50,
         top: 70,
      });

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

Example 2

Use the set method to operate the Text object

In this example, we assign properties to the text object using the set method, which is a setter for the value. Any properties related to stroke, stroke width, angle, scale, rotation, etc. can be changed using this method. 

<!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>Manipulating the Text object by using the set method</h2>
   <p>You can see the text in the canvas now with set values</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 text object
      var text = new fabric.Text("Add sample text here");

      // Set the properties
      text.set("top", 70);
      text.set("left", 65);
      text.set("fill", "white");
      text.set("fontWeight", "bold");
      text.set("backgroundColor", "#bf94e4");

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

The above is the detailed content of How to create a canvas with text 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：Explain the importance of SafeViewArea in React Native?Next article：Explain the importance of SafeViewArea in React Native?

Related articles

See more