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
1
vote
2 answers

FabricJS IText (and Textbox) is not editable in React Bootstrap

I'm trying to include a canvas in my React Bootstrap component, but I have a problem with IText and Textbox. Even if I set the corresponding property, I can not edit the text in the box. I can drag it, resize it, and even double click to insert the…
Rapper_skull
  • 11
  • 2
1
vote
1 answer

use fabric js canvas as a threejs 3d model texture

juste starting to learn threejs and to do so decided to build a t-shirt configurator in combination with fabric js. my goal is that the user can upload a picture to the canvas (cnvs) which will be mapped to the gltf model of a t-shirt the probleme…
Mcyes
  • 15
  • 2
1
vote
1 answer

image width and height not showing properly in canvas using fabric js

I am using Fabricjs to upload images with the current code. fabric image component not rendered properly as the actual size of the image. here is my JS code function addiMage(data) { let myImg = './layers/' + data.name +…
Manishs sharma
  • 7
  • 2
1
vote
2 answers

Objects snap to custum grid on fabric.js

I am building an app where I need the objects snap to a grid on mouseMove but I don't need a regular grid but a custumized one. I found this Fiddle and tried to place my own grid but objects do not snap to it. What I need is the center of the…
SIMBIOSIS surl
  • 357
  • 3
  • 15
1
vote
0 answers

Fabric.JS sizing guidelines

I've been trying to add sizing guidelines for my app built on FabricJS. I see the library provides guidelines for alignment and centering but not for sizing. I did some search on the web and I was not able to find it. I also tried to create it but I…
Bruno Quaresma
  • 9,457
  • 7
  • 32
  • 50
1
vote
2 answers

StrokeWidth value in px/em fabricjs

I am adding a rectangle/circle to the canvas and changing the strokeWidth with a range type input. What is the value of strokeWidth in px/em/%, if we have strokeWidth:5 and range of strokeWidth(1-10). Actually I wanted to know how much the actual…
Ameet deadpool
  • 39
  • 8
1
vote
1 answer

Fabric JS Tint Filter when applied resizes image Ember project

I have implemented Fabric in a Emberjs project, tinting a placed image causes the image to reduce in the lager markings. **Update, it may be a CORS issue as adding a user image can be tinted and keeps its dimensions correctly. component…
Conor
  • 426
  • 7
  • 22
1
vote
0 answers

Fabric.js svg elements to pop up on click to be edited and then return to its previous size/position

I am developing an app in html5 and I'm using fabric.js to manipulate some graphics. I need to make some of the paths to pop up when clicked in order to be edited on a closer view as their real size is quite small and the app will be display on…
SIMBIOSIS surl
  • 357
  • 3
  • 15
1
vote
0 answers

Correctly export fabric.Group with 2 images toDataUrl()

I have following : //Remove boundaries (RED DOTS , area is still visible) this.maskCanvas.remove(this.boundaryBorders!) //TODO Combine both canvases and export as Image const backgroundCanvasImg = this.canvas.getObjects()[0] …
Khalimjanov
  • 13
  • 3
1
vote
0 answers

Canvas Fabric JS scale only the contents on a bounding box to fit the size of bounding box

I have a few objects in my canvas that are significantly smaller than the bounding box that contains them, causing some problems for the usability of my canvas, is there a function in Fabric JS that can detect the contents of a bounding box and…
Alien13
  • 558
  • 3
  • 8
  • 30
1
vote
0 answers

FabricJS loadSVGFromString include custom object attributes from SVG URI

I have an SVG string like this one, where I have added some of my own attributes in the URI file string. However when I try to read it into a Fabric canvas using loadSVGFromString those attributes are removed. Example My SVG string can look like…
Alien13
  • 558
  • 3
  • 8
  • 30
1
vote
1 answer

Fabric JS loadSVGFromString include used defined custom attributes

I have an SVG string like this …
Alien13
  • 558
  • 3
  • 8
  • 30
1
vote
0 answers

Javascript statement document.getElementById('').style.display = "inline"; is effect later on when I open editor(Div) again

My requirement is to click on "save" button below thing should happen, save button and cancel button become hide loading button display on the place of "save" and "cancel" buttons. As my implementation when I click on "save" button current div…
Bhavin S.
  • 77
  • 12
1
vote
0 answers

Fabric Js -- iText field not exported by JSON.stringify(canvas)

I met some problems while trying to export an IText-field by JSON.stringify(canvas). As it appears to me, the properties 'text', 'fontStyle', 'fontSize' and 'fontFamily' seem not to be exported by the JSON.stringify(canvas) function, while the style…
HoLo
  • 7
  • 1
1
vote
2 answers

Fabric JS storing steps in database

This question might be slightly opinionated, sorry in advance for that. Is there any way to store the steps done on a FabricJS canvas in an efficient way? Let's say I am a user and I would like to continue editing my canvas later so I close down the…
Alien13
  • 558
  • 3
  • 8
  • 30
1 2 3
…
99
100