Fabric.js Textbox does not automatically wrap long text in version 5.3.0

I am currently using fabric.js version 5.3.0.

The Textbox object in fabric.js will wrap text when you add space between words, but it won't wrap when you add text without any spaces.

Please take a look at the following fiddle: https://jsfiddle.net/Niketa_patel/fo5q1bzt/10/

Below is the code snippet:

var canvas = new fabric.Canvas("c");
var str = 'Please type a long word and watch me break!';
var textbox = new fabric.Textbox(str, {
    width: 200,
});
canvas.add(textbox);
function setcharspacing(){
textbox.set('charSpacing',100);
canvas.renderAll();
}

I have attempted to create a custom function to wrap the text, but it does not work with charSpacing enabled.

Here is the link I referred to while trying to solve this issue:

Expectation:

The text should wrap correctly even when text is added without spaces, while also enabling charSpacing (with values ranging from -100 to 100).

Any assistance on this matter would be highly appreciated.

Thank you!

Answer №1

If you're looking for a solution tailored to this specific situation, consider using the splitByGrapheme property. It seems like it was designed exactly for scenarios like this!

var canvas = new fabric.Canvas("c");
var str = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
var textbox = new fabric.Textbox(str, {
    width: 200,
    breakWords: true,
        splitByGrapheme :true,
});
canvas.add(textbox);
function adjustCharSpacing(){
textbox.set('charSpacing',100);
canvas.renderAll();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>
<button id="charspcing" onclick = adjustCharSpacing()>
adjustCharSpacing
</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging $http in Angular without the need for $scope

When using the syntax <div ng-controller="BuildingsCtrl as bc"> to avoid using $scope (as mentioned here), how should I incorporate $http? In other words, how can I refactor the following code without relying on $scope? angular.module('atlasAn ...

Avoiding conflicts between API calls in React's ComponentDidMount and ComponentDidUpdate phasesNote: The original text does not provide

When using the componentDidMount lifecycle method, I fetch data using a Redux action as shown below: componentDidMount() { let parameter = some code; this.props.getAction(parameter).then(r => { if(r.type.endsWith('SUCCESS')){ ...

Exploring AngularJS tab navigation and injecting modules into the system

Two separate modules are defined in first.js and second.js respectively: first.js var app = angular.module('first',['ngGrid']); app.controller('firstTest',function($scope)) { ... }); second.js var app = angular.mo ...

Guide on making an NPM package with a web worker integration

Currently, I am in the process of developing an npm package that incorporates a web worker with type module. The issue arises when I try to link this package to a React application for testing purposes since the application cannot locate the worker.js file ...

Running a Custom Tab Component in a React Application

I am currently facing an issue with my React app that has multiple tabs. When I click on a specific tab, I want only that tab to render, but currently all tabs are rendering when I click on one. I have used console.log to confirm that all tabs are indeed r ...

Tips for combining Nuxt with Vue Cli 3

section: My current setup involves utilizing Nuxt.js to set up my Vue application. I'm curious if it's feasible to incorporate Nuxt into a Vue Cli 3 project in order to leverage the advantages of both platforms. Surprisingly, there doesn't ...

Is it possible to make this functionality Angular-friendly?

I am in the process of transforming a Bootstrap + jQuery theme into Angular JS, and I am encountering some challenges along the way. One issue is related to the functionality provided in the JS file of the theme: /* Sidebar Navigation functionality */ var ...

Instructions for setting specific items to be checked when loading jstree. The "selected = 'selected'" method is not functioning as intended

In my MVC 4 project, I am using jstree for tree models. While the create operation works fine, I encountered an issue during the edit operation. I need to set the value to true for certain items in the treemodel. The models I am working with are as follows ...

Is there a way to align elements to the left and right within a <div> container?

Having trouble styling my website at . I can't seem to get the images to align with names underneath and bios on the right. My VS Code keeps flagging Float properties as errors, and I need some CSS help from someone more experienced. function conde ...

What's the best way to retrieve a value from a function that invokes itself multiple times?

My task involves navigating through nested object data to find a specific result. I am using the findByKey function, which recursively calls itself until the desired result is found. However, instead of returning object.source, I am getting undefined. as ...

Adjusting the array of buttons with various functions within the Header component

I am looking to create a customizable Header component with different sets of buttons that trigger various functions. For example, on the home page, the buttons could be "visit about page" and "trigger vuex action A", while on the about page they could be ...

What are the steps to integrate underscore.js into my Angular project?

I utilized yo-angular to create my angularjs template incorporating bootstrap, grunt, and bower. Additionally, I have a desire to integrate underscore into the application: npm install underscore --save-dev Within the MainCtrl, I am testing the functiona ...

By employing timeUpdate in conjunction with currentTime

I am looking to utilize the timeUpdate and currentTime functionalities to display or hide a div at a specific time during video playback. I have been able to make it work, but it seems to be showing and hiding every second I specify. Below is the code I ...

Tips for sending data from a JSP to a Servlet with Javascript

My code creates an array of circular buttons with dynamic values. When clicked, these buttons get deleted and their values are stored in a JavaScript object array. I need to send these deleted button values to a servlet once my task is complete. To do this ...

The functionality of CKEditor is not compatible with PopUp windows

Currently, I am using CKEditor along with the bPopUp jQuery plugin. When I set up CKEditor in the HTML without any additional scripts, it functions perfectly. However, when I try to embed it into a pop-up window, it stops working correctly. I can see the C ...

AngularJS - Introducing blurred delay

Here is the code snippet I am working with: <div class="staff"> <input ng-model="user" ng-focus="isFocused = true;" ng-blur="isFocused = false;/> <div class="matches" ng-if="isFocused"> <div ...

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

Several different factors

I need to develop a form that allows users to edit existing comments. The form will display a textarea containing the old comment text and a submit button. My goal is to send the newComment data via ajax to another script. However, I am facing an issue w ...

Combining ng-repeat with manipulating the DOM beyond the scope of a directive

I'm struggling to understand Angular Directives and how they work. I have a simple array of objects in my controller, but creating the desired DOM structure from this data model is proving challenging. Any advice on best practices would be greatly app ...

Securing Data in AngularJS Services

After logging in to my AngularJS application, I noticed that the user roles stored in the loginService are editable by the user via the console. How can I enhance the security of this feature? How should CSRF be handled in my application? I have several ...