(This answer is an iteration on the fiddle in Tom’s answer. Thank you, Tom, for getting me down the road.) You can crop in Fabric.js using either fabric.Object.clipTo() or fabric.Object.toDataURL(). The clipTo() method retains the original image and displays a crop via a mask. The toDataURL() method creates a new image. My full example uses … Read more
Not really a geometric problem. The geometric part was solve by you. If you would look at internal polygon class from fabricjs you would notice that polygon as a calcDimension function where every point gets an offset: http://fabricjs.com/docs/fabric.Polygon.html To calculate canvas position you have to add that offset back before transforming. var canvas = new … Read more
The solution given by @spankajd is almost there but still not 100% accurate (as you’ll see the background image doesn’t completely fit to the canvas). The proper solution to this problem is indeed to use the scaleX and scaleY property (which takes a number as scaling factor), as mentioned by @asturur on your submitted issue. … Read more
I solved the problem on my own. See jsfiddle: http://jsfiddle.net/gcollect/FD53A/ This is the code: this.canvas.on(‘object:moving’, function (e) { var obj = e.target; obj.setCoords(); //Sets corner position coordinates based on current angle, width and height canvas.forEachObject(function (targ) { var objects = this.canvas.getObjects(), i = objects.length; activeObject = canvas.getActiveObject(); if (targ === activeObject) return; if (Math.abs(activeObject.oCoords.tr.x – … Read more
I’m not sure if there are limitation to canvas dimensions, but data urls have limitations depending on the browser: Data URL size limitations. What you could try is using Node.js + node-canvas (server side) to recreate the canvas. I’ve been using these for creating printable images from canvas elements, and didn’t have any problems/limitations using … Read more
When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well). Lets say we have this code which has a rect and a circle added to a group. var canvas = new fabric.Canvas(document.getElementById(‘c’)); var rect = new fabric.Rect({ … Read more
We had this same issue in our app of how to use Fabric.js inside of react. My recommendation is to treat fabric as an uncontrolled component. Have fabric instance that your whole app can talk to and make fabric calls and then when anything changes use .toObject() call to put the whole fabric state into … Read more
This can be accomplished with Fabric using the clipTo property, but you have to ‘reverse’ the transformations (scale and rotation), in the clipTo function. When you use the clipTo property in Fabric, the scaling and rotation are applied after the clipping, which means that the clipping is scaled and rotated with the image. You have … Read more
The DPI doesn’t matter at all when dealing with images. Images are measured in pixels so this is what you need to adjust. You can safely disregard DPI as it has no sense in this context. Scaling won’t help you here – remember you are working with a pixel device, not vectors, so the canvas … Read more
Here is a modified version of the original code (the provided code in question has changed values compared to my original code.. .-) ) which can produce all these shapes just by playing around with the parameters: The roof is not super but I’ll leave it to you to add scaling support as this is … Read more