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

AngularJS toaster doesn't seem to be appearing

I have integrated the angularjs toaster library into my project. Here are the necessary references: https://github.com/jirikavi/AngularJS-Toaster Added the following references for the library: <link rel="stylesheet" href="bower_components/Angu ...

javascriptangularjs

Produced inputs and preset values

I have a question regarding the use of generated input elements in my App's form. I want to keep it as simple as possible, which is why I am using native form reset for these elements. It appears that the 'default value' becomes bound to th ...

javascriptjqueryhtml

What is the significance of AngularJS in crafting Single Page Applications?

My introduction to AngularJS was discovering its perfection for Single Page Applications (SPAs). I'm intrigued by what this means and eager to learn more about it. Can someone explain the significance of SPAs in relation to AngularJS? ...

javascriptangularjs

Tips on including variables within quotation marks in JavaScript

I'm currently working on a JavaScript project using Pug. My goal is to use Express and MongoDB to develop a CRUD application that generates an edit button for each post, triggering a specific event when clicked. However, instead of the desired resul ...

javascripthtmlpug

Countdown Widget - Transform "0 Days" to "Today" with jQuery

I am currently working on a countdown page using the Keith Woods Countdown jQuery plugin which can be found at . Here is the code I have implemented so far: $(document).ready(function () { var segera = new Date(); segera = new Date(segera.getFullYear(), 2 ...

javascriptjqueryjquery-countdown

Take the inputs, calculate the total by multiplying with the price, and then show

I'm in the process of developing a simple PHP form for an online t-shirt order system. Most aspects are running smoothly, but I'm facing issues with the final calculations. My goal is to combine the quantities based on sizes, multiply them by the ...

javascriptjqueryformsmath

having difficulty utilizing svg files in a react application

I'm having trouble with a SVG image. I initially tried importing it from a folder, but it appeared empty. Then, I attempted to directly specify the path, but that didn't solve the issue. The file name is image.svg <svg xmlns="http://www. ...

reactjssvgmaterial-ui

update/renew angularjs unique directive

Incorporating the carousel plugin from Ionic Market into my ionic project has been a game changer. This specific plugin, known as Morph Carousel, is a custom AngularJS directive that allows me to display content in a visually appealing way. One unique as ...

javascriptangularjsangularjs-directiveionic-frameworkangular-directive

Leveraging jQuery to interact with MySQL database in PHP Laravel framework

I seem to have hit a roadblock with my database, which is quite intricate. Here's the breakdown of the tables used for the questions: product - contains product details such as shoes productattribute - houses different variations of products like bl ...

javascriptphpjquerymysqllaravel

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

I attempted to implement the .slideToggle("slow"); feature to my table, following the instructions detailed here: W3Schools The toggle effect seems to be functioning, but not as expected. I want the effect to behave similar to the example on the W3School ...

javascriptjqueryhtmljquery-uislidetoggle

An issue occurred with player.markers not being recognized as a function when trying to utilize videojs markers

I am trying to add markers to my videojs player timeline. I have successfully implemented this feature a few months ago in a different project, but now when I try to use it again, I am encountering errors in the console and unable to see the markers on the ...

javascriptreactjsvideo.jsmarkers

What is the best way to set the date defaultValue to be empty?

I've developed a basic radio button to display an additional input field when the user chooses yes. I also created a function that will clear the fields if the user selects no. schema.ts: const formSchemaData = z.object({ doesHaveDryRun: z.enum( ...

javascriptreactjsnext.jsreact-hook-formzod

Load Facebook video onto webpage using ajax technology

I have a database where I store the IDs of videos from Facebook, YouTube, and Vimeo. When I load any video via Ajax, Vimeo and YouTube videos load perfectly. However, Facebook videos do not load properly. The code obtained via Ajax includes a script requir ...

javascriptjqueryajaxfacebook

I encounter Error 406 and CORS issues when making API calls

I am currently engaged in a project aimed at helping my employer keep track of shipping loads, customers, carriers, and locations. The frontend is built using a react app that enables users to input information regarding loads, customers, etc. On the backe ...

javascriptnode.jsexpress

Is it possible to showcase a dropdown list within a constantly changing table?

I have a table code snippet that I need help with <fieldset class="tabular"><legend><%= l(:redmine_taskjuggler) %></legend> <%= labelled_fields_for(@issue) do |f| %> <div id="taskjuggler" class="attributes"> <div cl ...

javascripthtmlruby-on-railsinnerhtml

"Utilizing Date Labels on the X-axis in Google Chart API: A Step-by-Step

Is it possible to create a chart using Google Chart API where the X-axis values represent the days in a month? I have a set of data points that are not evenly distributed. For example: Date - Value 1/1/2009 - 100 1/5/2009 - 150 1/6/2009 - 165 1/13/2009 - ...

javascriptasp.netvb.netgoogle-visualization

The AngularJs project is currently experiencing issues when trying to function as a single page web application

I'm currently working on incorporating AngularJS into an existing web project that uses jQuery. Here is a snippet of my code: <div class="medya" ng-repeat="d in data" masonry-item-dir> <a href="{{d.Url}}" class="onizleme"><img src="{ ...

javascriptjqueryangularjs

Issues with voice state updates in JavaScript

I am currently working on setting up a discord bot to send notifications when someone joins a voice chat. While coding in Atom, I encountered the following error: TypeError: Cannot read property 'send' of undefined at Client.client.on (C:\U ...

javascriptbotsdiscord

Click twice on the editable AngularJS table to wrap each item

As a new learner of Angularjs, I found an existing code example and decided to customize it. My goal was to enable double-click editing for each li item. However, after adding one more li, the functionality did not work as expected. <li ng-dblclick="st ...

javascriptangularjs

Achieving accurate JSON output from Elasticsearch's autosuggest feature can be

Running my node.js server involves sending queries to an elasticsearch instance. I have a JSON example of the query's output: { "took": 2, "timed_out": false, "_shards": { "total": 5, "successful": 5, "failed": 0 ...

javascriptjsonnode.jsmongodbelasticsearch