Fabric.js is a remarkable library that streamlines the usage of HTML5 canvas elements, empowering developers to effortlessly craft engaging web applications. Packed with a multitude of features and tools, it empowers users to design interactive and visually stunning interfaces. JavaScript A notable advantage of lies in its capacity to generate custom classes, enabling developers to amplify its capabilities and customize it to meet their unique requirements. Fabric.js This blog will delve into the process of designing and utilizing a personalized class in Fabric.js. Our focus will be on developing a stroked textbox with rounded corners and padding. Additionally, we will explore the adaptability of this class to cater to various scenarios. Upon completing this blog, you will possess a comprehensive grasp of crafting custom classes in Fabric.js and utilizing them to elevate your canvas applications. Creating the Stroked Textbox Class The Stroked Textbox class is an extension of the default Textbox class in Fabric.js, introducing various additional features such as stroke width, stroke color, padding, and rounded corners. Let's analyze each line of code within this class: This line specifies the object type being created. type: "textbox": This line sets the stroke width to 5 pixels. strokeWidth: 5: This line determines the stroke color as #ffb64f. strokeColor: "#ffb64f": This line indicates that the textbox should be split based on graphemes. splitByGrapheme: true: This line assigns a value of 0 to rx, controlling the degree of rounding on the x-axis. rx: 0: This line assigns a value of 0 to ry, governing the degree of rounding on the y-axis. ry: 0: This function returns an object containing all properties of the Textbox class, along with the new properties introduced by the Stroked Textbox class. toObject: _renderBackground: This function oversees the rendering process of the textbox's background, encompassing padding, rounded corners, and the stroke. _renderBackground: fabric.TextboxWithPadding = fabric.util.createClass(fabric.Textbox, {
    type: "textbox",
    strokeWidth: 5, // Specifies the width of the stroke
    strokeColor: "#ffb64f", // Sets the color of the stroke
    splitByGrapheme: true,
    rx: 0, // Determines the rx value for rounded corners on the x-axis
    ry: 0, // Determines the ry value for rounded corners on the y-axis
    toObject: function() {
        return fabric.util.object.extend(this.callSuper("toObject"), {
            backgroundColor: this.get("backgroundColor"),
            padding: this.get("padding"),
            splitByGrapheme: this.get("splitByGrapheme"),
            rx: this.get("rx"),
            ry: this.get("ry")
        });
    },

    _renderBackground: function(ctx) {
        if (!this.backgroundColor) {
            return;
        }
        var dim = this._getNonTransformedDimensions();
        ctx.fillStyle = this.backgroundColor;
        ctx.fillRect(
            -dim.x / 2 - this.padding,
            -dim.y / 2 - this.padding,
            dim.x + this.padding * 2,
            dim.y + this.padding * 2
        );
        // Stroke only at the top
        ctx.strokeStyle = this.strokeColor;
        ctx.lineWidth = this.strokeWidth;
        ctx.beginPath();
        ctx.moveTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding);
        ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding);
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = this.strokeColor;
        ctx.lineWidth = 0.2; // Set line width to 1
        ctx.lineTo(dim.x / 2 + this.padding, -dim.y / 2 - this.padding + 1);
        ctx.lineTo(dim.x / 2 + this.padding, dim.y / 2 + this.padding - 1);
        ctx.strokeStyle = "#9181fc";

        ctx.lineWidth = 0.2; // Set line width to 1
        ctx.lineTo(dim.x / 2 + this.padding - 1, dim.y / 2 + this.padding);
        ctx.lineTo(-dim.x / 2 - this.padding + 1, dim.y / 2 + this.padding);
        ctx.strokeStyle = "#9181fc";

        ctx.lineWidth = 0.2; // Set line width to 1
        ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding - 1);
        ctx.lineTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding + 1);
        ctx.closePath();

        ctx.stroke();

        // If there is a background color, no other shadows should be casted
        this._removeShadow(ctx);
    }
}); Codebase https://github.com/dinesh-rawat-dev/Prodeasy-section-component Demo https://y5k9l8.csb.app/ Benefits of using the class With the utilization of the Stroked Textbox class, we gain the ability to generate personalized textboxes endowed with distinctive visual attributes that surpass the capabilities of the default Textbox class. This empowers us to craft canvas applications that possess enhanced visual appeal and captivate the audience with their uniqueness, setting them apart from others in the field. Using the Stroked Textbox Class To utilize the Stroked Textbox class, we can easily generate a new instance of the class and provide the necessary parameters. Below is an example demonstrating the usage of the class, showcasing the creation of a textbox with padding, rounded corners, and various stroke colors and widths: const textbox = new fabric.TextboxWithPadding('Inpur field', {
    fontFamily: "Roboto",
    // fontSize: 20,
    padding: 5,
    width: 100,
    textAlign: 'left',
    //@ts-ignore
    // left: rect.left + 20,
    //@ts-ignore
    // top: rect.top + 10,  
    selectable: true,
    evented: true,
    editable: true,
    //@ts-ignore
    placeholder: "",
    splitByGrapheme: true,
    // lockScalingX: true,
    // lockScalingY: true,
    lockMovementX: true,
    lockMovementY: true,
    fill: '#000000',
    fontSize: 10,
    // stroke: OBJECT_BORDER_COLOR,
    strokeWidth: 1,
    backgroundColor: "#d5d1eb",
    //@ts-ignore
    left: 30,
    //@ts-ignore
    top: 30,
    className: "text_box_with_padding",
    includeDefaultValues: true,
    intersectsWithFrame: true,
    hasControls: false,
    hasBorders: true,
}); In this particular instance, we have customized the textbox's appearance and behavior by configuring properties such as , , , , , , , , , , , , , and . fontFamily padding width textAlign selectable evented editable splitByGrapheme fill fontSize strokeWidth backgroundColor hasControls hasBorders Customizing the Stroked Textbox Class To further customize the Stroked Textbox class, there are two approaches you can take. Firstly, you possess the capability to modify the parameter values directly within the class itself. Alternatively, you can create a new subclass that extends the Stroked Textbox class and introduces additional functionality. Here are some suggestions on how to tailor the class to suit specific requirements: To alter the thickness of the stroke, modify the strokeWidth parameter. By adjusting the parameter, you can define the stroke thickness: increasing the value will yield a bolder stroke, while decreasing it will create a finer stroke. Adjust the stroke width: , setting strokeWidth to 10 will create a textbox with a thicker stroke compared to the default value of 5. For instance Change the stroke color: This parameter empowers you to alter the hue of the stroke, granting you greater flexibility in design choices. You can utilize a hexadecimal code or a named color. For example, setting to "#ff0000" will generate a red stroke. strokeColor To change the color of the stroke, you can adjust the value of strokeColor. This determines the space between the text and the textbox's edges. For instance, setting padding to 10 will increase the spacing around the text. Modify the padding: To change the degree of rounding on the textbox's corners, modify the values of rx and ry. These parameters govern the level of rounding on the x and y axes, respectively. For example, setting both rx and ry to 10 will create a textbox with more pronounced rounded corners. Adjust the rounding of the corners: Furthermore, you have the option to create a new subclass that extends the Stroked Textbox class and incorporates additional functionality. This approach grants you even greater customization possibilities, allowing you to introduce new features to the textbox. For instance, you could create a subclass that adds a drop shadow to the textbox or dynamically changes the font based on user input. The potential for customization is vast, and the Stroked Textbox class serves as an excellent foundation to build upon.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

How to Build Custom Textboxes in Fabric.js: Stroked, Rounded, and Padded

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

15 Common Product Discovery Mistakes I Made (And How You Can Avoid Them)

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

15 Common Product Discovery Mistakes I Made (And How You Can Avoid Them)

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps