How to create a simple editable canvas textbox using Fabric.js? - GeeksforGeeks

08 Feb, 2022
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 library: 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.
HTML
<!DOCTYPE html><html> <head> </head> <body>    <center>        <h1>GeeksforGeeks</h1>        <b>Creating canvas-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:
HTML
<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 }); 
Javascript
<script>     // Create a new instance 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>
Program: We can use FabricJS to create simple editable canvas-like textbox as given below:
HTML
<!DOCTYPE html><html>  <head>    <!-- FabricJS CDN -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">    </script>    <style>        body {            text-align: center;        }        h1 {            color: green;        }        canvas {            border: 2px solid green;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <b>Creating canvas-type textbox</b>        <canvas id="canvas"                width="600"                height="200">        </canvas>    </center>    <script>         // Create a new instance 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:
rs1686740
surindertarika1234
blalverma92
CSS-Misc
Fabric.js
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?