Is there a maximum size limit for the Fabric.js Path Array?

Has anyone tried plotting a line graph using Fabric.js and encountered issues with the fabric.Path? I've noticed that it stops drawing after 8 segments even though I have attempted different methods like loops and individually coding each segment.

const canvas = Controller.Canvas;

line = new fabric.Path('M 90 104', { stroke: 'black', fill: '' });
lastLeft = 90;

for (i = 1; i < 20; i++) {
    lastLeft += 20;
    line.path[i] = ['L', lastLeft, 104];
}

canvas.add(line);

Despite setting the code to draw a line with 20 segments, it unexpectedly stops at 8. The canvas size is adequate for the task, so I'm puzzled by this limitation.

javascriptsvgfabricjs

Answer №1

Upon reviewing the fabric.js code, it appears that the path property of Line is not intended to be modified directly as it is considered an internal property. Once the path data is parsed upon instantiation, fabric calculates the dimensions and position of the Line for rendering purposes. Any modifications made to the path property after instantiation may result in incorrect dimensions or missing lines.

To force fabric to recalculate the dimensions, there is a method available, although it is marked as private. This means that its behavior could vary between fabric versions (the example provided below is tested on version 3.4.0) and therefore should be used with caution unless necessary:

const canvas = new fabric.Canvas('c')
const initialX = 10
const initialY = 10
const line = new fabric.Path(`M ${initialX} ${initialY}`, { stroke: 'black', fill: '' })

for (let i = 1; i < 20; i++) {
    line.path[i] = ['L', initialX + i * 20, initialY + Math.pow(i, 2)]
}
/* WARNING: Hacky stuff start */
fabric.Polyline.prototype._setPositionDimensions.call(line, {})
/* Hacky stuff end */

canvas.add(line)
body {
  background: ivory;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="400"></canvas>

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

What is the best way to transfer Kendo Grid row data to a Kendo popup window within a partial view using jQuery?

I am currently facing a challenge in passing the row data from the Kendo Grid to a partial view that is displayed through a Kendo popup window. Within the partial view, users have the option to upload an image file related to the specific row record. This ...

javascriptjquerykendo-uikendo-gridkendo-window

Organize array by "categories" in Javascript and preserve the original sequence

There is a dataset presented below: [ { "name": "Item1", "section": "section1", "total": 3, }, { "name": "Item1", "section": "section2", "total": 4, }{ "name": "Item1", "section": "section3", "total": 7, }, { "name" ...

javascriptarraysangularsorting

Incorporating arguments within the context of a "for each" loop

I'm attempting to develop a straightforward script that converts RGB-16 colors to RGB-8. The script is functioning properly, but I'm having trouble converting it into a function that can handle two different palettes. Whenever I try using palette ...

javascriptfunction

Vue.js $scopedSlots do not function with Vue object

In the process of developing a Vue component that will be released once completed, I am wrapping Clusterize.js (note that the vue-clusterize component is only compatible with v1.x). The goal is to efficiently render a large list of items using Vue, particu ...

javascriptvue.jsvuejs2clusterize

Clear v-model without changing its associated values

I'm facing an issue with my <input> fields, which look like this: <input type="text" v-model=user.name" /> <input type="text" v-model="user.phone" /> <button @click="add">add user</button> Whenever the add user button i ...

javascriptarraysvue.jsv-model

The technique of accessing parent props from a child composition component in React

I am trying to reduce every letter prop from the child component, Palata. How can I achieve this? index.js <Block letter="I" mb={16}> <Palata letter="I" start={4} end={9}/> <Wall/> <Empty/> <Palata le ...

javascriptreactjsnext.js

Clicking on a href link inside a scrollable div-container causes it to malfunction, causing the page to jump

I have a draggable div container that contains dynamically generated content. In order to display this container, I use the following code: $( function() { $( "#dialog-message" ).dialog({ modal: true, height: 400, buttons: { Fertig: functi ...

javascriptjqueryhtmlgoogle-chromefirefox

Incorporating Dynamic Events into HTML Generated on the Fly within a Vue.js Component

Currently, I am facing an issue where I am trying to dynamically generate HTML in a Vue.js component. While I have successfully rendered the HTML, I am struggling to connect the events for these dynamically generated elements. To illustrate this problem, I ...

javascriptvue.js

Error: Unable to retrieve the value as the property is null

I'm a beginner in jQuery and I'm attempting to create a login form that displays a message when the user enters a short username. However, despite my efforts, the button does not trigger any action when clicked. Upon checking the console, it indi ...

javascriptjquerytypeerror

Utilizing jQuery to Calculate Tab Scores

Last week, my teacher and I collaborated on a fun game called rEAndom game (). The game is created using javascript, jQuery, and HTML5. One interesting feature of the game is that when you press the TAB key, a div displaying the score appears. You can chec ...

javascriptjqueryhtmlcss

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

javascriptphpjqueryhtmlcss

A method for modifying the key within a nested array object and then outputting the updated array object

Suppose I have an array called arr1 and an object named arr2 containing a nested array called config. If the key in the object from arr1 matches with an id within the nested config and further within the questions array, then replace that key (in the arr1 ...

javascriptarraystypescriptloopsobject

Determine the index of items within an array of objects in Lodash where a boolean property is set to true

I am new to using lodash after transitioning from C# where I occasionally used LINQ. I have discovered that lodash can be utilized for querying in a LINQ-style manner, but I'm struggling to retrieve the indexes of items in an array of objects with a b ...

javascripttypescriptlodash

Issue with showing Angular directive

I've been working on implementing an angular dropdown list with Bootstrap. The functionality includes a directive that allows the user to select a menu option from the dropdown and receive an alert message. To see the implementation in action, I have ...

javascriptangularjs

Display elements on hover of thumbnails using CSS

I'm struggling with the logic of displaying images when hovering over corresponding thumbnails using only CSS. If necessary, I can do it in JavaScript. Here's my latest attempt. <div id='img-container' class='grd12'> ...

javascripthtmlcss

Create original identifiers for dynamically generated material

I have developed a custom invoice tool that has the capability to dynamically add rows. Here is the code snippet responsible for generating new rows: $("#addrow").click(function(){ $(".item-row:last").after('<tr class="item-row"><td> ...

javascriptphpjqueryhtmlajax

Exploring best practices for transmitting JavaScript objects and arrays via forms to servers (JSON/??)

I would like to understand what would be the most effective approach to achieve this: Based on a user selection, generate a list of "selected items" in the following format: {items {categoryString {tag_id1 {[fr]=>itemFR, [en]=>itemEN} {c ...

javascriptjqueryarraysobject

Eliminate the registration message from TinyMCE by importing a package

Looking to create a TinyMCE React package, I've been using import { Editor } from '@tinymce/tinymce-react'; However, I'm encountering this message - To remove the message, typically you would add the API key to the .js. in your <scr ...

javascriptnpmtinymce

Node responds with a 404 error upon receiving the post request

I am facing an issue with my jQuery code. Here is what I have: $.ajax( { type: 'POST', data : mydata, url : '/routerfunction', dataType : 'String', success : function(data) ...

javascriptjquerynode.jsexpress

How to Use Radio Buttons in Material-UI to Disable React Components

Just starting out with ReactJS and Material-UI, I've been experimenting with them for about 3 weeks. Currently, I'm facing a challenge where: - There are 2 radio buttons in a group and 2 components (a text field and a select field); - The goal is ...

javascriptjqueryreactjsmaterial-ui