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
20
votes
6 answers

How to get the canvas-relative position of an object that is in a group?

Normally an object's position relative to the canvas can be gotten from it's .left and .top attributes, but these become relative to the group if the object is in a selection/group. Is there a way to get their position relative to the canvas?
Jasper van den Bosch
  • 3,169
  • 4
  • 32
  • 55
20
votes
7 answers

Multiple clipping areas on Fabric.js canvas

For making Photo Collage Maker, I use fabric js which has an object-based clipping feature. This feature is great but the image inside that clipping region cannot be scaled, moved or rotated. I want a fixed position clipping region and the image can…
ep4f
  • 420
  • 1
  • 5
  • 14
19
votes
5 answers

How to implement canvas panning with Fabric.js

I have a Fabric.js canvas and I want to implement the full-canvas panning that software packages usually do with a "hand" tool. It's when you press one of the mouse buttons, then move over the canvas while holding the mouse button and the visible…
Glory to Russia
  • 17,289
  • 56
  • 182
  • 325
19
votes
5 answers

Undo Redo for Fabric.js

I'm trying to add undo/redo functionality to my Fabric.js canvas. My idea is to have a counter which counts canvas modifications (right now it counts the addition of objects). I have a state array, which pushes the whole canvas as JSON to my…
gco
  • 1,670
  • 7
  • 24
  • 46
19
votes
3 answers

Saving canvas as a PNG or JPG

I want to save canvas as PNG, without opening it in a new window as base64-encoded image. I used this code: jQuery("#btnPreview").click(function(){ if (!fabric.Canvas.supports('toDataURL')) { alert('Sorry, your browser is not…
UXX1
  • 187
  • 1
  • 1
  • 9
18
votes
3 answers

set width and height of canvas in fabric.js

I have an image background in my HTML5 canvas. var canvas = new fabric.Canvas('#canvas1'); canvas.setBackgroundImage( 'http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas) ); How to set…
user2382627
18
votes
4 answers

How to upload an image to a canvas with Fabric.js?

I want that to create a process where the users can upload their images and then edit them in the browser in a Canvas with Fabric.js using some buttons, which uses Fabric.js to add some effects. I can't make it work. My HTML is:
user1230041
18
votes
5 answers

Set object drag limit in Fabric.js

i am new in fabric js want to set the drag limit i have also try with https://github.com/kangax/fabric.js/wiki/Working-with-events not able to get the solution. please check the attached image, object can move anyware but it should be display in…
MANISHDAN LANGA
  • 2,227
  • 6
  • 29
  • 43
18
votes
3 answers

Applying rounded corners to paths/polygons

I'm gathering some info for a project that has to start within a few weeks. This project contains a browser-based drawing tool where users can add predefined shapes or forming shapes themselves. Shapes must be selectable, freely scalable and…
MaPaBa
  • 191
  • 1
  • 1
  • 3
18
votes
1 answer

How to draw a line on a canvas using fabric.js

I am using fabric.js to draw a line on a canvas. This is my code, but I'm not getting any output: $("#Line").click(function() { // alert("Line"); canvas.add(new fabric.Line([50, 100, 200, 200], { left: 170, top: 150, …
user2779232
18
votes
1 answer

Drawing a dashed line with fabric.js

I'd like to draw a dashed line using fabric.js. I've found Issue #603 on github that should implement this feature. However I didn't find any example code and can't get it to work with fabric.js 1.2.1. Is it already part of fabric.js 1.2.1 or do I…
Hartwig
  • 1,353
  • 2
  • 16
  • 26
18
votes
1 answer

Get the canvas object while using fabric js

I'm using Fabric.js and I've created a fabric canvas object at one place. var x = new fabric.Canvas("mycanvas"); Now at another place, I want to access this object where 'x' won't be available. So how can I get the same fabric canvas object. I…
viji
  • 2,706
  • 5
  • 28
  • 34
18
votes
1 answer

Need to change the canvas background color while using fabric js

I've a canvas element and I create fabric object out of that. Now, I want to change the background color dynamically. The following doesn't work for me. var x; x = new fabric.Canvas("mycanvas", { backgroundColor : "#fff", selection:…
viji
  • 2,706
  • 5
  • 28
  • 34
17
votes
5 answers

Maintain strokeWidth while scaling in fabric js

Note: I have refereed SO question, but it is not useful for my case, because 1) I am trying to maintain previous border but as of now its recalculate border while scaling. I have added below code to stop increasing border automatically while…
DS9
  • 2,995
  • 4
  • 52
  • 102
17
votes
2 answers

fabric js fontweight not working

I am using this code to add textbox in canvas using fabric js, var text = 'Type Text Here'; var textSample = new fabric.Textbox(text, { left: getCardLeft() + 100, top: getCardTop() + 10, width: 200, height: 20, fontFamily:…
Himanshu Bhardiya
  • 1,047
  • 14
  • 37
1 2
3
…
99 100