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.
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.
JavaScript code: In this section, we can place the text inside the canvas.
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>Creating canvas-type textbox</b>
<canvas id="canvas"
width="600"
height="200">
</canvas>
</center>
</body>
</html>
|
CSS
<style>
body {
text-align: center;
}
h1 {
color: green;
}
canvas {
border: 2px solid green;
}
</style>
|
Javascript
<script>
var canvas = new fabric.Canvas("canvas");
var text = new fabric.Textbox('A Computer Science Portal',
{
width: 450
});
canvas.add(text);
</script>
|
Syntax:
fabric.Textbox('Sample Text', { width: 100 });
Output: Click here to check the live Output.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Feb, 2023
Like Article
Save Article