fabricjs

I just started with fabric.js and I have a (probably beginner) error: I am using fabric with jquery with the following code: $(document).ready(function () { canvas = new fabric.StaticCanvas('scroller'); canvas.add( new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) ); }); This code should draw a 140x100 Rectangle on the canvas. Sadly, only a quarter of the Rectangle appears. If I change the top and left values to higher numbers, more of the Rectangle appears on the canvas. So it seems, that the canvas origin is not at 0/0, but at sth. higher. Does someone know how to

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 at that particular pixel. Case 2: Zoom in a little at one position (3-5 times with mouse wheel), then move the mouse to a new position and zoom in there. Result: Works fine for the first point, but after moving to another point and zooming, the image position is incorrect. My code is in this fiddle: https://jsfiddle.net/gauravsoni/y3w0yx2m/1/ I

I'm currently developping an application on mobile device (android and iPhone) with ionic and cordova. I would like to edit a picture. I use fabric.js library to do that. Fabric.js converts an image and other items into canvas. Then I add some image on the canvas (stickers) and export it as an image(dataURL). So the size of the canvas is really important because it is a quality factor (export an image based on small canvas will result in poor quality). The canvas size is about 607*1080 pixel (depending on the device that took the photo). I would like to fit it in the screen without losing

I am trying to limit the moving object within the canvas but i am getting some difficulty to moving object with limit area on top and left side and when i scale the object with big size that time also i am not able to limit the moving object on left and top side of the canvas canvas.observe("object:moving", function(e){ var obj = e.target; // if object is too big ignore if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){ return; } var halfw = obj.currentWidth/2; var halfh = obj.currentHeight/2; var bounds = {tl: {x: halfw, y:halfh}, br: {x: obj.canvas.width-halfw,

How can I drop items (like image, or other object from other canvas) into canvas which is managed by fabricjs? I have found many examples how to move items inside canvas but I would like to drag and drop item from outer element into canvas. Since you asked for an example and I haven't tried it out myself yet, here goes: Example Fiddle Markup <div id="images"> <img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img> <img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="252" height="295"></img> <img draggable="true" src="http://i.imgur.com/wMU4SFn

Is there any built-in support for for undo/redo in Fabric.js? Can you please guide me on how you used this cancel and repeat in [http://printio.ru/][1] Tom In http://jsfiddle.net/SpgGV/9/ , move the object and change its size. If the object state is changed, and then we do undo/redo, its previous state will be deleted when the next change comes. It makes it easier to do undo/redo. All events of canvas should be called before any element is added to canvas. I didn't add an object:remove event here. You can add it yourself. If one element is removed, the state and list should be invalid if this