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

document.getElementById in react using fabric js

How I can change the JavaScript code into React? document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; Note that I am using Fabric.js library. Here is my code: export…
Ragheed Samkari
  • 11
  • 1
1
vote
1 answer

Can't get proper coordinates for selected objects on canvas

For example let's create two rectangles. Then we select these two rectangles and want to see their coordinates: var greyBox = new fabric.Rect({ left:100, top:100, fill: 'grey', width: 100, height: 100 }); var redBox = new…
AntonAntonoff
  • 137
  • 8
1
vote
1 answer

fabric.js generate an image that is the same size as my canvas

I have a 1000x1000 canvas. I want to generate an image that is the same size as my canvas. The image has been generated perfectly on the desktop view but it generated 3x larger than the original canvas size in the responsive or mobile view. For…
Darshit Parmar
  • 25
  • 3
1
vote
0 answers

FabricJS include all attributes in canvas.toObject()

When saving a canvas using canvas.toObject(), custom object attributes are skipped, but also some build in ones such as: borderColor. This can be quite annoying since saving the canvas using canvas.toObject() and loading it again using…
Alien13
  • 558
  • 3
  • 8
  • 30
1
vote
1 answer

Resizing rectangle based on user input

I am trying to resize a rectangle based on the user input, but i get an error saying: Cannot read property 'addEventListener' of null. Do i need to change something in the HTML? I tried moving the script below the body but it didn't work. Seems like…
Mark t
  • 95
  • 5
1
vote
1 answer

Select text of IText on FabricJS

I want set the text selection by code in FabricJS like the image. When I create the IText object I need to select all text to facilitate the editing. I check the documentation, but no success.
Marlos Carmo
  • 972
  • 1
  • 8
  • 13
1
vote
1 answer

Text outside bounding box in fabric js

I am using fabric js for the annotations. I am facing an issue while adding text of specific font family. When I add text, it goes outside the bounding box and that's why the text which is outside is removed. How can I fix text inside the bounding…
Hunzla Ali
  • 383
  • 2
  • 5
  • 22
1
vote
1 answer

Vue: how to create methods that change things created in mount()?

I want to create a button that recenter the canvas. Clicking the button should call the rec() method, which should recenter the canvas created in mounted(). But that doesn't work. I suspect that the methods can't really refer to things created in…
Duh Huh
  • 139
  • 1
  • 1
  • 7
1
vote
1 answer

How to add editable text and images to threejs

So i'm trying to add new images and text as texture of 3d object using fabric js to my 3d configurator im using this code as codebase https://github.com/devramkumardnagarajan/3d-Tshirt-design and this code for the fabric js…
naoval luthfi
  • 703
  • 7
  • 20
1
vote
0 answers

How to reuse base64 bitmap images in the final SVG with fabric.js

I'm working on a web editor app that generates SVG Images. I allow users to upload bitmap images as base64 into the editor. The Problem is, that if a user uses an image multiple times, the SVG file size increases far too much. With the SVG format,…
Neidi
  • 66
  • 7
1
vote
2 answers

Smooth zooming through the canvas

I have a zooming feature in my fabricjs app. The that runs zoom is just very similar to this: http://fabricjs.com/fabric-intro-part-5 canvas.on('mouse:wheel', function(opt) { var delta = opt.e.deltaY; var zoom = canvas.getZoom(); zoom *= 0.999…
papryk
  • 442
  • 4
  • 14
1
vote
0 answers

add image(by path) on canvas fabric js

I know that using URL is easy like this function imageOnCanvas() { var canvas = new fabric.Canvas("workCanvas"); fabric.Image.fromURL( …
ResetMara
  • 13
  • 3
1
vote
0 answers

Canvas Get Stuck when using fabric.loadSVGFromString

When I load SVGs via fabric.loadSVGFromString(svg), the Fabric Canvas gets stuck and ultimately the browser freezes. However, I don't observe any problems when I use fabric.Image.fromURL(base64Svg). However, I can't utilize base64 converted images…
Umanda
  • 4,737
  • 3
  • 23
  • 28
1
vote
1 answer

How to indenfinetly animate the concetric circles on a canvas FabricJs

I am able to animate the concentric circles on a canvas using FabricJs Canvas. I am able to make an infinite animation up to the last outer circle however the last outer remains on the canvas and my goal is to restart the animation from the inner…
Riley Christian
  • 149
  • 1
  • 13
1
vote
1 answer

I need to animate the concetric circles on a canvas FabricJs using recursive function

I have 10 concentric circles that i want to animate using FabricJs Canvas. My goal is that the 1st inner circle should show itself first then and the 2nd, and so on by using recursion or some other techniques to avoid code duplication. I have…
Riley Christian
  • 149
  • 1
  • 13
1 2 3
…
99
100