fabricjs

I have been trying to create a custom brush paint with an image file using fabric JS . I have tried using the fabric.PatternBrush but this is not the exact thing that I was looking for because this creates a background pattern kind of paint and what I am trying to do is repeat the image wherever the mouse is dragged. Can anyone please direct me towards the right way? It will be fine for me to switch to any other drawing library that does what I am looking for. I found a solution to this problem. We can create a custom brush using fabric.BaseBrush as follows: fabric.SprayBrush = fabric.util

I have 3 fabric objects on the canvas, a rect and text are grouped as 1 object, then I dynamically create a polygon, and redraw it on object:moving between the group object and another rect. These form what looks like a "speech bubble", with the group and the rect (pointer) both being movable. What I'd like to achieve is: when the polygon is clicked with the mouse, you can move all 3 objects while holding the mouse down. So far what I have groups the items together fine, but you can only move all the items if you select the polygon, then release the mouse button , then click the group again ,

I am trying to import multiple svg file and after modification saving the json to database. I have tried to use canvas.item(0).sourcePath = '/URL/FILE.svg'; JSON.stringify(canvas.toDatalessJSON()); but this won't work for multiple files, it works for the first file only. i am trying to specify every single file url but can't understand how this can be done. any solution please? thanks in advance canvas.item(0) - gets the first object. canvas.item(1) - gets the second object and so on.... If you don't know the total amount of objects you can use the canvas.forEachObject option. canvas

Why this clipTo method doesn't work on the latest fabricjs version, which you could resize the object container and the image inside it. Also you able to move the container object and image object. var imgInstance = new fabric.Image(img, { width: instanceWidth, height: instanceHeight, top: (canvas.getHeight() / 2 - instanceHeight / 2), left: (canvas.getWidth() / 2 - instanceWidth / 2), originX: 'left', originY: 'top' }); canvas.add(imgInstance); imgInstance.clipTo = function(ctx) { /* image clipping method doesn't work on latest fabricjs version*/ ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0)

I am currently running with my project and in that i have used fabric js to work with canvas. In that i want my canvas object not to go out of canvas boundary.I did this code and it is working fine unless and until i am rotating it. but when i am rotating the object, top left of that object is getting as per rotation and my code is not working well. I want some solution which will work in any condition but my object should not go outside of canvas boundary. Thanks var canvas=new fabric.Canvas('demo'); canvas.on('object:moving',function(e){ if(e.target.getWidth()+e.target.left>canvas.width) { e

I'm working on a project with Fabric.js. Now I need to create a custom class and to export it to SVG. I'm using Fabric.js tutorial to begin: http://www.sitepoint.com/fabric-js-advanced/ Here is the javascript code: var LabeledRect = fabric.util.createClass(fabric.Rect, { type: 'labeledRect', initialize: function(options) { options || (options = { }); this.callSuper('initialize', options); this.set('label', options.label || ''); }, toObject: function() { return fabric.util.object.extend(this.callSuper('toObject'), { label: this.get('label') }); }, _render: function(ctx) { this.callSuper('

I want to restrict area for uploaded image in canvas. I am using fabric js to achieve this solution. I have seen one link, But did not get idea. that link is: Set object drag limit in Fabric.js . I also want to same thing, But i am not able to do this one. what i want? i will show in screen shot. var canvas = new fabric.Canvas('canvas'); $("#canvascolor > input").click(function() { canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), { crossOrigin: 'anonymous' }); }); // trigger the first one at startup $("#canvascolor > input:first-of-type()")[0].click(); document.getElementById