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.

0
votes
0answers
9 views

Fabricjs custom fonts gets partially applied

Following this tutorial, I'd like to change the font family of a text using some custom fonts. These fonts are loaded using this library When a font is picked, this method is triggered: setFont = (...
1
vote
0answers
10 views

Need the bootstrap class “embed-responsive-item” to work with the fabric canvas element

So I am using bootstrap's embed-responsive structure that involves a wrapper with embed-responsive class & an additional class for defining aspect ratio & the child element with embed-...
0
votes
0answers
9 views

Is there any way to resize group in canvas without affecting objects size

Whenever group resize happens in canvas, objects also getting resized. Is there any way to resize only the group borders independently like rectangle
0
votes
1answer
16 views

how to tie text height to bounding box in fabricJS textbox

https://imgur.com/a/M1PpTiH So im working with fabricjs textboxes and i have a custom implementation that allows for textwrapping while still allowing the user to adjust the height of the bounding ...
-2
votes
0answers
29 views

Selection Rectangle not visible while cropping

var canvas = new fabric.Canvas('c1'); var src = "http://fabricjs.com/lib/pug.jpg"; canvas.backgroundColor = "#333"; canvas.renderAll(); var pos = [0, 0]; var r = document.getElementById('c1')....
1
vote
0answers
30 views
+50

how to apply back and forth scalling to all objects in fabricJS?

I have multiple canvas in one screen using fabricJS. I have added some ITexts, Text Box, Image, Background in each canvas. I have some scalling options, like 25%, 50%, 100% to 300% in increasing ...
0
votes
1answer
22 views

fabricjs - get real size of an object loaded from JSON

I'm loading an SVG from a JSON, in a 1500x1500px canvas. Uploading the result of toSVG() gets me this image. As you can see if you inspect the image, the hoodie has a width of 720 px. Is there a way ...
0
votes
0answers
31 views

TextBox editable Cursor duplicates

I have grouped a fabricjs text and object, tried to edit the text inside the group but my cursor was enabled in two position var object = event.target; if (object && object.name == "...
0
votes
1answer
12 views

Need to select before Dragging FabricJS Object

If I want to change the position of my Unselected or Un-active TextBox object, I have to select it before dragging it to new position. I rather want to move it by just moving cursor up to the object ...
0
votes
1answer
23 views

Apply spectrum color on the SVG (Fabricjs)

I am currently trying to apply colors on all object present in svg by using spectrum color. First I am storing all unique color of objects in SVG in an array and then displaying in a spectrum which ...
0
votes
0answers
14 views

How to reduce Fabric.js memory usage when importing SVG files with clipPaths

I'm running into WebKit memory limits with a Fabric.js instance when viewing on mobile devices, and could use some help figuring out the best plan of attack. Total canvas memory use exceeds the ...
0
votes
0answers
26 views

Convert huerotation to hexadecimal color

I found this function for huerotation: Change png image color in fabric js Wonderful :-) I get a value like -0.123456 and the t-shirt is blue. Ok, but how can i convert this value into a ...
0
votes
0answers
16 views

FabricJS zoomIn and zoomOut off-sets background image

I am trying to implement a zoomIn and zoomOut feature for my canvas that has a background image set on it. Zooming in and out works except when I zoomOut the background image which has been set take ...
0
votes
0answers
19 views

Canvas - Video Stream to Image Object

I am using FabricJS to make handling with Canvas easier, but to YOU out there that may not understand FabricJS, you could probably still give me some insight. I am trying to enable video stream onto ...
0
votes
1answer
19 views

FabricJS not render SVG correct when SVG include text with custom font?

I have a problem with render SVG in fabricjs when SVG include text with custom font. How to make SVG in Fabricjs display correct with custom font? Here is my code: var canvasObject = document....
0
votes
0answers
27 views

How to apply .otf fonts in fabricJS?

I have list of .otf fonts, around 200 fonts. I am loading those fonts using opentype.js as below: opentype.load('HelveticaNeueLTStd-BdCn.otf', (err, font) => { if (err) { console....
0
votes
1answer
23 views

Prevent zoom outside background - fabric.js

I am using fabric.js to generate a canvas with a background. I want to add zoom and followed this guide. But when using .zoomToPoint() with the background, it can unaligned and shows a white blank ...
0
votes
0answers
15 views

What function or attribute is responsible for drawing space between text lines in FabricJS?

What function or attribute is responsible for drawing space between text lines? Is it possible to change it?
-1
votes
0answers
17 views

How can i load multiple background-images onclick

is it possible to change background-image in fabric onclick? i need different image views, which are also editable. Thx for help
0
votes
0answers
10 views

How do I automatically set a line break for a string in FabricJS?

I'm supposed to display a JSON in Fabric, it works pretty well. Somehow I can't get it to display too long string correctly. My idea is that if the string reaches the width, it will be warped. I have ...
0
votes
0answers
13 views

Is it possible to create curved animation on fabricjs?

I'm creating a drawing thanks to fabric js. I created 2 rectangle linked with a curved line. Now I would like to create a small circle which follow the line but I do not succeed to create a curved ...
1
vote
1answer
29 views

Updated version of delete button as control replacement for object in Fabricjs?

I need to create a delete button on the objects I add to the canvas replacing the top right corner, or the 'tr' property of the controls. I have not found a solution to do this as previous versions ...
2
votes
0answers
35 views

Perform semantic zooming using fabricjs

I want to achieve semantic zooming using fabricjs. I've got a plot of dense points on the canvas. However, when we zoom in or zoom out, points size should remain as it is but the distance between ...
0
votes
1answer
16 views

Is there a way to increase and decrease font-size in fabricjs onclick

These are my steps: Add dummy text Increase/decrease font-size on button click I am using Vue, Javascript and jQuery for it. Now i get the right font-size, but only when i add a new text. But it ...
0
votes
0answers
22 views

Uncheck the checkbox's when select new image object in canvas (Fabricjs)

I am adding Image via button and apply filters via checkbox and it is working but when i try with second image the checkbox are already checked and there are no filter applied on the second image yet. ...
0
votes
0answers
24 views

Fabricjs - canvas.findTarget(e) doesn't work in firefox

I have used canvas.findTarget(e) for find object. For that, I have used DOMMouseScroll event for canvas. But, every time I get undefined value of the targeted element. I have also followed this ...
1
vote
0answers
16 views

Subclassing Fabric JS Type in Typescript Causes error when deserialize

I extend Fabric Js Default type: export class Button extends fabric.Rect { public text: string; public textColor: string; public font = '30px Arial'; public action: ActionEnum; public type ...
0
votes
0answers
20 views

How can I detect border on PDF loaded in canvas?

I have a pdf that is set as the background of a canvas tag. In pdf file there are rectangular fields. How to hover the mouse over a rectangle in pdf, I get the size and position of the rectangle. Can ...
0
votes
1answer
22 views

FabricJS bold, italic style is not working in ITexts

I am using fabricJS 3.0.0 and 2.7.0, but both version doesn't support bold and italic style on ITexts. what I have tried is here: 1. this.canvas[0].getActiveObject().setSelectionStyles({fontWeight:'...
0
votes
1answer
59 views

How to use both fabric.js and paper.js to make a drawing app?

I want to make a drawing app and I can't get the basic functionality to pan a layer nor to edit the svgs and scale, transform. With paper.js the canvas can be easily resized and fit a div but I need ...
0
votes
1answer
20 views

FabricJS - change the anchor side of the rotating point

I'm trying to render a box with the rotating point in the bottom. Normaly, we can render a box with the property hasRotatingPoint: true and a handle appear in the top side of the box to the user ...
1
vote
1answer
35 views

Fabric.js not loading path elements from SVG

As per fabric's documentation, fabric.loadSVGFromURL will return "paths, path groups (for complex objects), images, text, and so on." I'm trying to load this SVG that has paths and images, but fabric ...
1
vote
0answers
23 views

Fabric.js - Programmatically transforming group objects relative to a central image object

Using Fabric.js, I have an image object that acts like a background where other group objects (consisting of rectangle and text) can be placed over it. I would like to be able to programmatically ...
0
votes
0answers
15 views

Subclassing - Text edit smillar to iText

I'm subclassing a Rect class to make own element called "Button". It haves text inside, i want a provide edit text tool smillar to iText(double click allow edit) How to reach this? Custom component ...
0
votes
1answer
21 views

Multiselect in fabric js without key modifier

I was wondering if there is a way to actively set multi-selection "mode" in fabric js canvas without holding down the shift? I wish to activate multiselection by listening on a boolean value thats ...
2
votes
0answers
44 views

How to keep SVG image scale/viewport on zoom in fabricjs version 2.x?

I upgraded fabricjs to 2.x and 3.x. in both version, when I zoom the canvas the svg image also scaling or viewport changing. let greenCircle = new fabric.Circle({ radius: 50, fill: 'green', top: 110, ...
0
votes
0answers
8 views

How to build an aktive tile with FabricJS

I would like to associate a rect with an image so that when I move the rect it tiles itself. The image should not overflow the rect. first one 2 start movinglast one start iterating/tileing i hope the ...
0
votes
1answer
39 views

How to freeDraw fabric.Path with certain offset to it?

I need to be able to draw a fabric.Path using fabric's freeDrawingBrush with certain offset from where mouse hits canvas. For instance: if canvas.getPointer() returns point p = {x: 100, y: 100}...
0
votes
0answers
26 views

How to get Image “tile”/tiled?

I would like to tile my fabricJS group[oImg, rect]. I would like to move the group so that the group starts tiling with each movement. That is what I have trying so far: fabric.Image.fromURL(`data:...
1
vote
0answers
10 views

how to fill color to image in canvas using fabric.js

I have added three images to which I need to fill colour based on certain values. I have used fabric js to fill the canvas with an image from URL I had tried using hue rotation to fill the image but ...
2
votes
1answer
56 views

How to trigger modal when div element is dragged to specific location?

I am making a a boardgame website for a schoolproject. I have a div element(image) that can be dragged. The goal is to reach to the finish line. So my main problem is that how can I trigger a modal ...
0
votes
0answers
33 views

Fabric js mouse:dblclick event not working on ios

Building an Ionic App and using fabric canvas in it. Need to use the double tap event on canvas but 'mouse:dblclick' event is not firing on iOS devices while it's working fine on android. Using ionic ...
0
votes
2answers
48 views

Angular 7 popover loading

I am using fabricjs to load image and textcontents. I have many textcontents on canvas with fabricjs. now on click of textcontents of fabricjs I want to open Angular 7 popover may be (ngbPopover). ...
0
votes
1answer
17 views

Mouse control is not working with object movement. Fabric Js

I am trying to create a responsive canvas and while I am doing that I am facing issues related to the transform tool object movement and selection. Can you please help me where I am doing wrong? In ...
-3
votes
1answer
32 views

External Javascript Libraries (cdnjs) not being reached by html code

I have been trying to add some html and javascript to my website so users can draw some shapes. I found a really good sample to work from on JS Fiddle. When I run the code on JSFiddle, it works ...
0
votes
0answers
16 views

Cannot close a fabric panel with react correctly

When I click on close on the fabric ui panel, the screen in the background remains grey , so it seems that it is still open tried to change the onDissmed within the object, nothing seems to work. &...
0
votes
0answers
32 views

Stroke for Custom Image in Fabric JS

I'm trying to create stroke around images I've added to canvas using Fabric JS. The stroke I've added to a PNG with transparent background looked like this: Although I'm trying to create stroke "...
0
votes
1answer
25 views

FabricJS: Why cant I click on objects during animations?

I need a circle, which gets bigger every second. If I click the circle, it should disappear. Ok so I added an animation and a mousedown function. But at the end of the animation the mousedown ...
0
votes
0answers
39 views

Fabric JS + Gif image animation not working

I am using FabricJS and i want to load gif image object on canvas. I already loaded gif image on canvas but gif image animation is not working. is there any way to render gif image animation with ...
0
votes
0answers
24 views

Fabricjs - Shift + Click not selecting more than one object on canvas

Running fabricjs 3 I'm playing around with fabricjs, which is great. However, I'm at a point where I can no longer Shift + Click to select multiple objects. I've tried calling canvas.renderAll(). I ...