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
26
votes
4 answers

Layering canvas objects in Fabric.js

Is there a way to layer objects on a Fabric.js canvas via the official API? Right now the only way I have found to do it is to manually iterate through the canvas._objects and reorder them so that they get drawn in a specific order. Is there a…
Zwade
  • 1,682
  • 4
  • 17
  • 28
26
votes
6 answers

How can I disable scaling points of canvas elements using fabric.js?

By default fabric.js elements come with 8 points to scale any objects. But the app I'm working specifically requires that stretching should not be allowed on a single axis (horizontally or vertically). I only want the corner points, not the ones on…
Rohan210
  • 825
  • 2
  • 14
  • 35
25
votes
3 answers

Fabric.js: Canvas with 100% width possible?

When using 'canvas = new fabric.Canvas('foo')', Fabric converts the canvas element that has a css class with width=100% attached to it into something like that:
thomasf1
  • 1,782
  • 4
  • 18
  • 32
24
votes
4 answers

How to identify the type of a selected object?

I am placing Text, Image and Shapes on canvas using Fabric.js. I have made Three different Edit-Panels for all three. When user select text I want to show text panel. like wise for image and shapes. How to identify type of selected Object?
anam
  • 3,905
  • 16
  • 45
  • 85
23
votes
5 answers

Fabricjs pan and zoom

How can I pan and zoom using fabricjs? I've tried using the methods zoomToPoint and setZoom but they do not work for panning. Once I start using different zoom points I start having trouble. $('#zoomIn').click(function(){ …
d0001
  • 2,162
  • 3
  • 20
  • 46
22
votes
1 answer

FabricJS scale image to fit width / size

How do i scale image to fit the container size correctly? I want a grid of two images and each image to fit the provided size. https://codepen.io/peteringram0/pen/gebYWo?editors=0010 img.set({ left: 0, top: 0, width: 300, height:…
Peter I
  • 843
  • 1
  • 9
  • 31
22
votes
3 answers

Disable group selection in Fabric.js

How to disable group selection in Fabric.js and leave single objects selectable one at a time? With group selection I mean selecting multiple objects using eg. SHIFT+Click.
Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
22
votes
3 answers

Crop Functionality using FabricJs

How to implement crop tool on the image that is loaded on the canvas using fabric.js ? I have a image loaded on the canvas .Now i want to implement crop tool where the user is allowed to crop the image and reload it on to the canvas when he is done.
John
  • 2,003
  • 2
  • 20
  • 30
21
votes
6 answers

Fabric.js - Free draw a rectangle

I have the following which doesn't work correctly: var canvas = new fabric.Canvas('canvas'); canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up',…
jahilldev
  • 3,520
  • 4
  • 35
  • 52
21
votes
1 answer

Image zoom centered on mouse position

I am writing a script with Fabric.js to zoom an image at the current mouse position. I have made some progress but there is an error somewhere. Case 1: Keep the mouse at one point and zoom with the mouse wheel. Result: Works perfectly, image zooms…
Gaurav_soni
  • 6,064
  • 8
  • 32
  • 49
21
votes
1 answer

What is the best practice to export canvas with high quality images?

I need your help. I explain my situation: I’m using fabric.js library to place shapes, text, etc. in my application. My canvas size has 1000x1000 pixels (about 26.45x26.45 centimeters). I have an image upload script only for upload images in high…
ptCoder
  • 2,229
  • 3
  • 24
  • 38
21
votes
2 answers

Resize the canvas with fabric js

The application lets user save the designs and post it so other users can view it later. The original canvas saved with the proportions of width=700 and height=600. But when displaying the canvas, I want to resize the canvas to fit into dimensions…
Rohan210
  • 825
  • 2
  • 14
  • 35
21
votes
6 answers

Delete multiple Objects at once on a fabric.js canvas in html5

I'm actually working on a html5 canvas project which uses the fabric.js Framework for the canvas interactions. Now I'm struggeling with the deletion of multiple objects. The following code does not seem to track the selected objects, but tracks all…
John Mayer
  • 1,039
  • 1
  • 11
  • 17
20
votes
3 answers

How can I set up Fabric.js in vue?

I just came across the same combination: Fabric.js and Vue.js and was wondering, but I'm working with VueJs few days and I don't know how to set up fabric in vue. Can you share some experience for me?
Ziteng Wang
  • 203
  • 1
  • 2
  • 6
20
votes
3 answers

How to add image to fabric canvas?

I want to add images/icons to my fabric canvas. The code given on the Fabric demo is not working. fabric.Image.fromURL('my_image.png', function(oImg) { canvas.add(oImg); }); This just makes my entire canvas blank. I want to add icons as clickable…
Ankur Lathwal
  • 725
  • 1
  • 7
  • 24