Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Stroke to a Textbox Using Fabric.js
In this tutorial, we are going to learn how to add stroke to a Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. Our textbox object can be customized in various ways like changing its dimensions, adding a background colour, or by changing the colour of the line drawn around the object. We can do this by using the stroke property.
Syntax
new fabric.Textbox(text: String, { stroke : String }: Object)
Parameters
text This parameter accepts a String which is the text string that we want to display inside our textbox.
options (optional) This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which stroke is a property.
Options Keys
stroke This property accepts a String which determines the colour of that object's border.
Example 1
Passing stroke as key with a hexadecimal value
Let’s see a code example to understand how our textbox object appears when the stroke property is used. A hexadecimal colour code starts with a # followed by a six-digit number representing a colour. In this case, we have used “#800000” which is the colour maroon.
<!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 stroke as key with a hexadecimal value</h2>
<p>You can see that the stroke around the text is of maroon colour</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("When nothing goes right, go left!", {
backgroundColor: "#e3dac9",
width: 400,
top: 70,
left: 65,
fill: "green",
stroke: "#800000",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2
Passing an RGBA value to the stroke property
In this example we will see how to assign an RGBA value to the stroke property. We can use an RGBA value, instead of a hexadecimal colour code, which stands for red, green, blue, and alpha. The alpha parameter specifies the opacity of a colour.
<!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 an RGBA value to the stroke property</h2>
<p>You can see that the stroke colour is coming from the RGBA value 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 textbox object
var textbox = new fabric.Textbox("When nothing goes right, go left!", {
backgroundColor: "#e3dac9",
width: 400,
top: 70,
left: 65,
fill: "green",
stroke: "rgb(339,100,27)",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
371 Views
