fabricjs

I am trying to create multiple pages as canvases using Fabric.js on click of a button - e.g. every time the button is clicked a new page is created. The problem I'm having is that I want these canvases to use the same functions which are created at when the page is loaded and are only assigned to the initial canvas. Is there a way to create instances of the canvas and still use those same functions? My understanding of your question is that you are creating multiple canvases within a single HTML document. When you are assigning functions to your initial canvas, do you mean they are being added

I'm using a Threejs canvas to render a 3d model and another (this one hidden) Fabricjs canvas to apply as a texture. I achieved to transform the 3d coords from the threejs canvas to the 2d canvas. Now what i need is to "replicate" or "emit" the click and drag events from the 3d canvas to the hidden 2d one as suggested in a comment from this question. I made a codepen with my progres. If you click the left canvas a dot will spawn in the same coords but in 2d canvas. I need to be able to click and drag the canvas objects directly from the left threejs canvas. See the codepen i made Codepen <div

I got this situation which is hard for me to search on Google and explain. Our company prints photos on aluminium and we give our customers two choices. The first choice is to print their pictures on aluminium just like they gave the picture to us, so if the picture has a white background the picture gets printed with a white background. Easy like that. The second option is that we can print their picture without using white. instead of all the "white values" (<- the best I can come up with to explain) being printed we leave it transparent. I know there is this removeWhite filter in fabric JS

I would like to get the new point coordinates after object being modified but when i get the points coordinates after being modified they are the same point coordinates with which I have drawn the polygon. Can anyone please tell me why it so? Below is my code, <!--fabricjs --> canvas.on('object:modified', function(e){ var obj=e.target; console.log("new point coordinates "+obj.points); }); Below is the code I used to get the updated points with ROTATE being disabled. But if I get the updated points using below code with rotate option being enabled and after rotating the object, I get wrong set

I am using Fabric.js with React/Redux and i am trying to achieve the following effect on canvas: (note i have 2 rulers on the top and left which shouldn't move around when panning, just horizontally and vertically). This is a video of the effect I am trying to get: https://vid.me/qs5Q I have the following code: var canvas = new fabric.Canvas('c'); var topRuler = new fabric.Text('this is the top ruler', { top: 0, left: 60, selectable: false }); var leftRuler = new fabric.Text('this is the left ruler', { top: 150, left: -125, selectable: false }); var circle = new fabric.Circle({ radius: 20,

I managed to snap the objects to grid using round-off. canvas.on('object:moving', function(options) { options.target.set({ left: Math.round(options.target.left / grid) * grid, top: Math.round(options.target.top / grid) * grid }); }); How do I disable this, say, on button click? I tried using a flag isGridEnabled and doing: canvas.on('object:moving', function(options) { options.target.set({ left: options.target.left, top: options.target.top }); }); but the object(s) still snap to grid! jkdev Use .off to remove an event handler from a Fabric canvas. I'll quote what kangax (the creator of Fabric