Stack Overflow
Stack Overflow

Questions tagged [fabricjs]

Fabric.js is an HTML5 canvas library, providing an object model for canvases, an SVG-to-canvas renderer and a canvas-to-SVG parser.

Fabric.js is a framework that makes it easy to work with element.

It is an interactive object model on top of canvas element and an SVG-to-canvas (and canvas-to-SVG) parser.

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

Additional Resources:

4646 questions
65
votes
6 answers

Fabric.js - how to save canvas on server with custom attributes

I'd like to be able to save the current canvas' state to a server-side database, probably as a JSON string, and then later restore it with loadFromJSON. Typically, this is easily accomplished using: var canvas = new fabric.Canvas(); function…
sa125
  • 28,121
  • 38
  • 111
  • 153
59
votes
3 answers

Fabric.js changes my canvas size to 300x150 after initialization

HTML:
CSS .canvas-wrapper { width: 900px; min-height: 600px; } #myCanvas{ border:1px solid red; position: absolute; top:22px; left:0px; …
user469652
  • 48,855
  • 59
  • 128
  • 165
56
votes
6 answers

How can I use Fabric.js with React?

I have an application using heavily HTML5 canvas via Fabric.js. The app is written on top of Angular 1.x, and I am planning to migrate it to React. My app allows writing text and drawing lines, rectangles, and ellipses. It is also possible to move,…
Kitanotori
  • 1,741
  • 5
  • 16
  • 23
40
votes
4 answers

How to select Fabric.js object programmatically

I want to programmatically select Fabrics.js object. What do I have to do? For example, I am adding two objects like this: var canvas = new fabric.Canvas('canvas'); canvas.add(new fabric.Rect({ left: 100, top: 100, width: 75, height:…
Thirumalai murugan
  • 5,698
  • 8
  • 32
  • 54
38
votes
8 answers

Let user delete a selected fabric js object

I have a simple fabric js based application where I will let users add shapes connect them and animate them. Following is my JS var canvas; window.newAnimation = function(){ canvas = new fabric.Canvas('canvas'); } window.addRect = function(){ …
user5049061
38
votes
5 answers

Fabric.js: how to deselect one or multiple objects on canvas?

For example, I have multiple objects on a canvas, A,*B* and C. Three of these objects are selected as activated. By using Fabric.js, is it possible to discard/deactivate only one of the objects? For example, Three objects as selected, then when a…
PaulLing
  • 2,068
  • 3
  • 17
  • 21
33
votes
7 answers

Interactive text fields with Fabric.js

I've been playing with Fabric.js a lot in the last few weeks, but regarding text fields I've only found it possible to set the text on creation. Is there any possible way to make an interactive text field, or do I have to find a workaround to…
Kappei
  • 714
  • 2
  • 15
  • 34
32
votes
6 answers

Move object within canvas boundary limit

I am trying to limit the moving object within the canvas but i am getting some difficulty in moving the object in the limit area on top and left side and when i scale the object bigger then also i am not able to limit the moving object on left and…
Sanjay Nakate
  • 2,020
  • 6
  • 39
  • 74
31
votes
9 answers

Undo-Redo feature in Fabric.js

Is there any built-in support for for undo/redo in Fabric.js? Can you please guide me on how you used this cancel and repeat in [http://printio.ru/][1]
John
  • 2,003
  • 2
  • 20
  • 30
29
votes
4 answers

FabricJS prevent canvas.clipTo from clipping canvas.backgroundImage

I want to set a global clipTo in my Fabric-powered Canvas that will affect all user-added layers. I want a background image and an overlay image, which are unaffected by this clip mask. Example: Here's what's happening in this photo: A canvas…
chadoh
  • 4,343
  • 6
  • 39
  • 64
28
votes
2 answers

Fabricjs Textbox make the text shrink to fit

I would define a text box (single-line) By default, with a character size of 16 (for example) When the text gets bigger than the text box, I do not want it to wrap or the text box gets bigger, I want the text size to fit the maximum size of the text…
neopheus
  • 543
  • 1
  • 4
  • 12
28
votes
5 answers

Select All the objects on canvas using Fabric.js

Is there a way to explicitly select all the objects present at a particular instance of time. This can be easily done using mouse to select all. Is there a code-solution like a button named Select All so that clicking it would make all the fabric…
softvar
  • 17,917
  • 12
  • 55
  • 76
28
votes
1 answer

Fabricjs after object move programmatically its not selectable on its new position

I have tried to move the object programmatically and get success, but after the object is moved by programmatic way, its not able to select the object by selecting the object current position, still the object is selectable from by its old position…
Thirumalai murugan
  • 5,698
  • 8
  • 32
  • 54
27
votes
5 answers

Download Canvas as PNG in fabric.js giving network Error

I want to download Canvas as PNG using fabric.js. While downloading I want to scale the image. So I use multiplier property of toDataURL() function. But I get Failed-Network Error PS: If I dont give multiplier property,it is downloading but I do…
Abhinav
  • 8,028
  • 12
  • 48
  • 89
27
votes
5 answers

Control z-index in Fabric.js

In fabricjs, I want to create a scene in which the object under the mouse rises to the top of the scene in z-index, then once the mouse leaves that object, it goes back to the z-index where it came from. One cannot set object.zindex (which would be…
Ian
  • 271
  • 1
  • 3
  • 3
1
2 3
…
99 100