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
1
vote
1 answer

How can I center an object horizontally with an animation?

I found the method centerH which puts the element correctly in the center const activeElement = canvas.getActiveObject() activeElement.centerH() However it doesn't animate the object. So I tried to implement it myself const activeElement =…
BrunoLM
  • 97,872
  • 84
  • 296
  • 452
1
vote
2 answers

Line-by-line text background color padding in Fabric JS / Canvas

I am using the library FabricJS to overlay text on canvas. I need to add padding (ideally just left & right) to a text element that includes the property textBackgroundColor. Here is what I've tried so far: let textObject = new fabric.Text('Black &…
londonfed
  • 1,170
  • 2
  • 12
  • 27
1
vote
2 answers

Wrong bounding object when translate viewport in FabricJS, user can't select object when click on object

Please help me resolve this problem. 1. I have a text display at postion : left: 10, top: 10. 2. Using viewportTransform to move viewPort to new position : translate by X axis 100 & by Y axis 100 3. The text object is moving to new position…
Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36
1
vote
2 answers

How to alway center clipped area while resize window in FabricJS?

Please help me resolve this problem. I have a canvas area alway fill up screen size with background is gray. And rectangle clip path with size 300 x 300 --> how to make this clip path alway display at center of canvas while resize window ? ( and…
Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36
1
vote
1 answer

this.canvas.loadFromJson is not a function

I have been trying to save a canvas setting into my localStorage system with this source: saveToJson(){ let json = this.canvas.saveToJson(); console.log(json); localStorage.setItem('canvasSettings',json);} and trying to re-load the saved canvas…
fredi tansari
  • 77
  • 2
  • 6
1
vote
1 answer

Can't color the selected letters and their background with FabricJS 2

Hi I want to color just the selected text and its background with FabricJS. In fact letters of text with FabricJS as below: as very well shown on their website demo. But I can't figure out a way to reproduce that. I've tried with…
kabrice
  • 1,475
  • 6
  • 27
  • 51
1
vote
1 answer

How to add key press listener for IText objects in FabricJS?

I currently have this code fabric.IText.prototype.keysMap[13] = 'onEnterKeyPress'; fabric.IText.prototype.onEnterKeyPress = (e) => { console.log('onEnterKeyPress', e); // this.insertChars(e); // fabric.IText.insertChars(e); // return…
Jplus2
  • 2,216
  • 2
  • 28
  • 49
1
vote
0 answers

FabricJs load previous/current step without using canvas.toJSON()

I am using FabricJs to create an online image editor. Is a simple thing, this actions: zoom, rotate, flipX, undo, redo. I firstly tried to use the toJSON, and fromJSON, but I saw that when the user was clicking on the undo button fabricjs reloads…
Rus Mine
  • 1,523
  • 1
  • 18
  • 29
1
vote
1 answer

FabricJS 2- Setting fill on SVG paths when only single path

So adding an SVG to the canvas as follows: // load the svg fabric.loadSVGFromURL(self.currentDraggedIcon, function(objects, d) { var iconGroup = fabric.util.groupSVGElements(objects, d); iconGroup.set({ left: e.layerX, top: e.layerY, …
Glen Elkins
  • 867
  • 9
  • 30
1
vote
0 answers

Can we add a scroll bar in text component of Fabricjs?

We have requirement to have scroll bar for fabricjs text component. So that user can fixed width and height of the component and if text is not fitting in that width or height then appropriate scroll bar should be appeared instead of increasing…
kalpeshdeo
  • 1,236
  • 1
  • 11
  • 16
1
vote
2 answers

FabricJS - Ability to output (to PNG) a small section of canvas, not entire canvas

I would really appreciate some feedback and help with FabricJS. I have a 500 x 500px pixel bounding area (defined by dashed line) within a larger 600 x 600px canvas. However, I only want to output to PNG the small section within the dashed area, not…
Robert Godino
  • 41
  • 6
1
vote
1 answer

BlendImage Filter not available When i download from FabricJS builder

BlendImage Filter not available When i download from FabricJS builder I have selected all option from below link http://fabricjs.com/build/
Shakti Patel
  • 3,762
  • 4
  • 22
  • 29
1
vote
1 answer

Fabricjs. Disable all events/selection. (making eyeDropper)

Need to change selected object color by using eyedropper, color i can get using this way: canvas.on('mouse:up', function (e) { var c = document.getElementById("c"); var ctx = c.getContext("2d"); var imgData =…
user2455079
  • 420
  • 4
  • 16
1
vote
2 answers

FabricJs: Saving and loading dynamic patterns from JSON (patternSourceCanvas)

I am having a problem saving and loading dynamic patterns that are applied to objects. I have searched online for a solution to this to no avail. I understand why it is happening, but do not understand how to resolve it. Here is basically what I am…
Serks
  • 333
  • 2
  • 21
1
vote
0 answers

setting width/height in fabric.js version 2.2.0 does not fit the image to the object size

I am using fabric version '2.2.0'. while creating an image object pass top, left, width, height. const imageobj = new fabric.Image(image, {'top': 50, 'left': 50, 'width': 300, 'height': 300}); width / height values passed to initialize the image…
Hema
  • 11
  • 2
1 2 3
…
8 9