Fabric JS i-text cursor malfunctioning when loading JSON data

When I initially create a fabricjs i-text object in a new window, the cursor works perfectly. However, upon loading a saved JSON file, the cursor no longer functions as expected. I am utilizing the league_gothic font.

Please refer to the image below showing the issue with the cursor (3rd character). https://i.sstatic.net/sxWyv.png

Saving code snippet:

savejson = JSON.stringify(canvas.fabric.toJSON())

Loading Code:

canvas.fabric.loadFromJSON(loadjson, function(){
...
}

UPDATE: Upon inspecting the i-text object using console.log, I noticed the cursoroffsetCache variable. I am unsure of how to address this issue. Has anyone else encountered a similar problem?

javascriptjsonfabricjs

Answer №1

If you encounter issues with a non-loaded font on the canvas, it is crucial to ensure that the font is fully loaded before utilizing it. Otherwise, the canvas may resort to using a substitute font such as Arial, leading to inaccurate text measurements.

To address this issue, you have two potential solutions:

1) Implement a reliable font loader like https://github.com/typekit/webfontloader. This tool is user-friendly, compact in size, and highly effective. Upon loading completion, proceed to load your JSON data.

Alternatively:

2) Once you have loaded the JSON data, consider deleting fabric.charWidthsCache after a short delay of 1 or 2 seconds. By doing so, incorrect measurements will be eliminated. Additionally, set _forceClearCache to true for your text objects to trigger new measurements once the font has been fully loaded. Subsequently, perform a render all request.

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

The jQuery code functions properly only if it is inserted directly into the console

I'm facing an issue with a Mobile Font markup switch function. It works fine in the console, but not when I run it within a document ready function or call the function separately. It's strange that I have to paste the code directly into the con ...

javascriptjquery

What is the best method for designing a custom mask for the jQuery Masked Input Plugin that accommodates alphanumeric characters, spaces, and accented

Looking for a way to make a custom mask in jQuery Masked Input Plugin that allows alphanumeric characters, spaces, and accented characters? This is what I currently have: $.mask.definitions["A"] = "[a-zA-Z0-9 ]"; $("#input").mask("A?AAAAAAA"); However, ...

javascriptjquerynon-ascii-charactersmaskedinputjquery-mask

Set up a Bootstrap date picker to populate two input boxes with a start and end date. Additionally, disable the ability for the date value to change

In my project, I have implemented Bootstrap Datepicker to set two input boxes for selecting start and end dates. The rule is that the start date must be after today and the end date must be after the selected start date. To disable specific dates in the da ...

javascriptjqueryajaxtwitter-bootstrap-3

A guide to disabling daily checkboxes and retrieving the chosen values using Angular.js

Within a single table, I have incorporated a dynamic drop-down list that spans over 7 days. Additionally, I have implemented a "+" button that allows for the creation of additional rows dynamically for each day. Each row within the table features a checkb ...

javascripthtmlangularjs

Choosing a particular svg path in d3.js using JSON attribute

Is it feasible to isolate just one of the SVG paths generated from a geoJSON file using D3? In my scenario, the paths represent different areas on a map. Users can pick an area from a dropdown menu. I aim to utilize the selected value from this list to pin ...

javascriptjsond3.jssvg

Retrieve file server domain using JavaScript or jQuery

I'm trying to extract the domain name without the "http(s)://www." from a file link. For example, if the script returns "example.com", I want it to parse through links like "http://www.example.com/file.exe" or "https://example.com/folder/file.txt#some ...

javascriptjquery

Multiplying the values enclosed within two characters within a PHP string

Make sure to check out the EDIT section at the end. I have encountered invalid json data from an external URL that I need to parse and update the values of specific keys. My goal is to multiply the values by a constant number for a particular key (cent). ...

phpjsonregexparsing

Automating user login with node.js and passport.js: A step-by-step guide

My login application is built using node.js and passport.js, with the session being maintained using express-session and connect-mongo. I need to ensure that users are redirected to the home page upon accessing the URL, only sending them to the login page ...

javascriptnode.jsexpresspassport.js

Tips for handling imports and dependencies in a React component that is shared through npm

Hello everyone, I'm diving into the world of sharing React components and have encountered an interesting challenge that I hope you can help me with. Currently, I have a button component in my app that is responsible for changing the language. My app ...

javascriptreactjsnpmdependenciesshared-libraries

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

javascripthtmlinputassign

Failure to display div upon onmouseover event

The div 'hidden-table' is causing issues as it does not display even though the style attribute 'display:none' has been removed. I have attempted to show the table separately outside of the echo statement, and it appears to work correct ...

phpjavascriptonmouseover

i am trying to execute a function in an angularjs controller through html, but the scope variable that i am

Being new to angularjs, I'm looking to understand the process of calling a function defined in a controller from HTML within angularjs. I have written the following code in my HTML: First.html <input type="text" ng-model="model.name" name="name ...

javascriptjqueryangularjs

Is it possible to enable auto play on HTML5 Video for iPad similar to BBC iPlayer?

Can HTML5 Videos automatically play on iPads? I used to believe that it wasn't possible because of iOS restrictions, but after trying BBC iPlayer on my iPad, I noticed that the videos did autoplay upon loading. Could this indicate that it is indeed ...

javascriptioshtmlipadhtml5-video

Discovering old (potentially neglected) npm dependencies: strategies for locating outdated packages

I am aware of the npm outdated command, which shows out-of-date dependencies only if a new version has been published. However, in certain cases (such as abandoned projects), there may not be a new version released and the package could still be considere ...

javascriptnode.jsnpmyarnpkg

Unable to execute functions using an AJAX request

Currently, I am developing a React component that is bound to various actions. During this process, I found the need to call an API from within the component and handle the response accordingly. To achieve this, here is my current approach: In a successfu ...

javascriptajaxreactjsreact-redux

The error message "Google Heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined" was encountered while using the

I'm currently working on a project that involves utilizing a JSON data structure like the one shown below: [ { "lat": 53.1522756706757, "lon": -0.487157731632087, "size": 63, "field": "TestField", ...

javascriptarraysjsongoogle-mapsheatmap

Slight Misalignment of Elements

I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...

javascripthtmljquerycss

Having issues with Facebook's login API for JavaScript?

Apologies for the improper formatting. I am encountering errors in my JavaScript compiler while working with the Facebook Login API... Error: Invalid App Id - Must be a number or numeric string representing the application id." all.js:53 "FB.getL ...

javascriptfacebookapifacebook-javascript-sdkapp-id

A guide on incorporating router links within a list component in a React project

In one of my projects, I've implemented a navbar with a profile icon that expands to show four different options: "Log in", "Register", "Edit", and "Admin". However, I'm facing an issue where clicking on these links doesn't always redirect m ...

javascriptreactjsmaterial-uireact-router

Set the style to be displayed as a block element

I am working on a Rails application that contains some <li> elements with the CSS property display: none;. I want these elements to only appear on the page when they are being dragged. However, there are some elements that do not have the display: no ...

javascriptjqueryhtmlcssruby-on-rails