Stack Overflow
Stack Overflow

Questions tagged [fabricjs2]

For questions about programming problems with version 2 of the Fabric.js framework. Use [fabricjs] if your question isn't version dependent.

This tags refers to the version 2 of Fabric.js
Fabric.js makes easy to work with elements.

Have a look at the 2.0 changelog for breaking changes and extra features from previous version,
or visit the for more tagged questions.

Fabric.js also supports subclassing, touch devices and Node.js

Additional Resources:

122 questions
17
votes
5 answers

Maintain strokeWidth while scaling in fabric js

Note: I have refereed SO question, but it is not useful for my case, because 1) I am trying to maintain previous border but as of now its recalculate border while scaling. I have added below code to stop increasing border automatically while…
DS9
  • 2,995
  • 4
  • 52
  • 102
7
votes
4 answers

FabricJS - "Tainted canvases may not be exported" JS Error when run toDataURL

I have a custom component called ImageContainer, which basically creates a rectangle and applies an image as a fill pattern. When I run function toDataURL on the canvas, I get a js error Uncaught DOMException: Failed to execute 'toDataURL' on…
Eugene Vilder
  • 492
  • 1
  • 9
  • 26
7
votes
2 answers

fabricjs: retain the correct indexes of an object's image filters after loadFromJSON

I am applying filters to objects (following image filters demo) and everything is ok but after I save and load the canvas, the image filters change index. At the moment I have four filters and they are applied by index (as shown in the demo). 0 :…
Serks
  • 333
  • 2
  • 21
5
votes
1 answer

fabric.js: Fill free drawing path as user is drawing (lasso tool)

In fabric.js, we can draw free hand paths (http://fabricjs.com/freedrawing) (http://fabricjs.com/fabric-intro-part-4#free_drawing) (Yes I've already seen this post and it doesn't solve or reference my problem) What I'm trying to achieve is showing…
Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144
5
votes
4 answers

How to show object bounding box when mouse hover objects in Fabricjs?

I want to show object bounding box when mouse hover over objects like this video, how to do that ? I'm using canvas.on('mouse:over') with selectedObj.drawBorders function. However, outline box is drawn in not correct position. And I don't know how…
Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36
5
votes
2 answers

setText() not working in fabricjs version 2

I am trying to set text to textbox explicitly,in older fabricjs versionobject.setText("something") was working but not working in fabric js version 2. Any other way introduced in this version? var canvas = new fabric.Canvas('c'); var text1 = new…
Pratyush Pranjal
  • 544
  • 6
  • 26
4
votes
2 answers

loadFromJSON doesn't including additional property in fabric js

I have this JSON: https://codepen.io/dhavalsisodiya/pen/RJNNXw That json has additional property as textAnchor. Now the issue is when ever i am trying to load that json onto canvas, that textAnchor property doesn't get included on canvas object. You…
DS9
  • 2,995
  • 4
  • 52
  • 102
3
votes
0 answers

Is there any way to allow objects only to move within another objects in a canvas in fabric js?

I'm new to fabric js, Simply I want to allow some objects (rectangles) to move within a given object(polygon) as in the diagram. Is there any way to do it in fabric js?
v.wih
  • 51
  • 5
3
votes
1 answer

How to programmatically free draw using Fabric js?

Building a multiplayer doodle using fabric js. Trying to implement multiplayer doodle using fabric js, the idea is when U1 draws on canvas we push the points to RTDB and get those points on both the client and programmatically draw the stroke in…
Kushagra Agarwal
  • 1,816
  • 7
  • 18
  • 31
3
votes
0 answers

How to customize fabricjs canvas coordinate system?

Is there any setting or something provided in fabricjs for customizing canvas coordinate system? For my project I found easy to use cartesian coordinate system. Currently I am translating each object to (width/2, height/2) in order to move to…
mudin
  • 2,672
  • 2
  • 17
  • 45
3
votes
0 answers

How to make auto break new line Text in FabricJS?

I want to make auto break new line Text when user typing a long text. Text's width is fixed ( behavior like attach video ). And user can drag middle left & middle right control point to change Text's width. How to make that Text in fabricJS ? …
Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36
3
votes
1 answer

fabricjs Object Selection is not working with panning

I have been working with fabricjs for creating a drawing tool. There is a large image as the canvas background and panning feature. User can drag and drop objects on the canvas. But the Object drop on the canvas is not selected when we pan the…
Kathak Dabhi
  • 399
  • 3
  • 16
2
votes
1 answer

Fabricjs selection or hover based on mouse location on object bounding rectangle for inner objects

I want to achieve selection based on the bounding rectangle but with a different approach. Scenario: If I draw object inside object, like first text, then rectangle over it, then ellipse and then triangle. Now I should be able to select the text or…
Jivan
  • 520
  • 1
  • 5
  • 14
2
votes
0 answers

fabric js canvases export in mp4 file

I need to export the fabric js canvases(I have more than one) in an mp4 file with the same animation between each with some transitions. I don't find anything related to this on the internet. My frontend is in angular and the backend is in…
Dinesh Rawat
  • 970
  • 10
  • 32
2
votes
1 answer

FabricJS clippath border color and move the overlay image behind clippath?

I am trying to add the clippath area(rect object) over canvas using fabricJS. Currently i set Overlay Image to the canvas and in addition to that am adding clippath area to place objects. I successfully able to place the object inside the clippath,…
Vignesh Pichamani
  • 7,950
  • 22
  • 77
  • 115
1
2 3
…
8 9