Skip to content
Related Articles

Related Articles

Improve Article
How to create a simple editable canvas textbox using Fabric.js?
  • Last Updated : 15 Apr, 2020

In this article, we are going to create a canvas textbox using Fabric.js. The canvas means text written in the Textbox is movable and can be stretched according to requirement. Further, the text itself can be edited into anything else too because it is a textbox.

Creating structure: To make this possible we are going to use a JavaScript library called FabricJS and create a basic canvas structure.

  • Including FabricJS librarie: Importing the library using CDN

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js”></script>

  • HTML code to create canvas structure: We will create a canvas block in the body tag which will contain our textbox. After this, we will initialize instances of Canvas and Textbox provided by FabricJS and render the Canvas on the Textbox as given in the example below.




    <!DOCTYPE hyml>
    <html>
      
    <head>
      
    </head>
      
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <b>Creating cnavas-type textbox</b>
            <canvas id="canvas"
                    width="600"
                    height="200">
            </canvas>
        </center>
      
    </body>
    </html>                    

Design structure: In this section we will design the pre-created structure, and also add the functionality to move the canvas text around the canvas by using JavaScript.

  • CSS code to design the structure:




    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        canvas {
            border: 2px solid green;
        }
    </style>
  • JavaScript code: In this section we can place the text inside the canvas.

    Syntax:

     fabric.Textbox('Sample Text', { width: 100 }); 




    <script>
      
        // Create a new instace of Canvas
        var canvas = new fabric.Canvas("canvas");
      
        // Create a new Textbox instance
        var text = new fabric.Textbox('A Computer Science Portal'
        {
            width: 450
        });
          
        // Render the Textbox on Canvas
        canvas.add(text);
    </script>

    Final solution: In this section we will just combine all the above sections that will create a canvas-type text-box.

    • Program: We can use FabricJS to create simple editable canvas-like textbox as given below:




      <!DOCTYPE hyml>
      <html>
         
      <head>
          <!-- FabricJS CDN -->
          <script src=
          </script>
          <style>
              body {
                  text-align: center;
              }
              h1 {
                  color: green;
              }
              canvas {
                  border: 2px solid green;
              }
          </style>
      </head>
         
      <body>
          <center>
              <h1>GeeksforGeeks</h1>
              <b>Creating cnavas-type textbox</b>
              <canvas id="canvas"
                      width="600"
                      height="200">
              </canvas>
          </center>
          <script>
        
              // Create a new instace of Canvas
              var canvas = new fabric.Canvas("canvas");
         
              // Create a new Textbox instance
              var text = new fabric.Textbox('A Computer Science Portal', 
              {
                  width: 450
              });
              
              // Render the Textbox on Canvas
              canvas.add(text);
          </script>
      </body>
      </html>
    • Output:



    My Personal Notes arrow_drop_up
Recommended Articles
Page :