fabricjs

I am writing code to maintain same strokeWidth across all the objects in Fabricjs. I am able to successfully maintain strokeWidth for normal Objects , let it be rectangle or ellipse(I wrote code to maintain both). But when I use group , I am unable to maintain the strokeWidth. Here's the fiddle . Steps to reproduce the issue ? 1)Open above fiddle link 2)resize the circle , check the size of border ( thickness of border remains the same on re-sizing ) 3)Now resize the rectangle and text(group) , expected result is thickness of border must be same throughout but that doesn't happens . Code : `

I have a Text in fabricJs. I set top and left. This sets the aCoords properly to those values. However the oCoords dont match. And the Text is not displayed at the right position. I suspect that I need to set to oCoords somehow. So that the Text is displayed at the right pixel coordinates (top & left) on the canvas. aCoords and oCoords are two different things and should not be in sync. In your comment you speak about scaled canvas. Top and Left are 2 absolute values that represent the position of the object on the canvas. This position match with the canvas pixels when the canvas has a

I would like to resize a fabricjs rect instead of scale it, but I'm seeing weird behaviour while dragging the resize handles. The border starts to disappear or duplicate. I've tried both the stable version 1.7.19 and the beta 2.0.0 of fabricjs. Here is the essence of the code I'm using: canvas.on('object:scaling', function(){ var obj = canvas.getActiveObject(), width = obj.width, height = obj.height, scaleX = obj.scaleX, scaleY = obj.scaleY; obj.set({ width : width * scaleX, height : height * scaleY, scaleX: 1, scaleY: 1 }); }); Working example here: https://codepen.io/bramchi/pen/GMLYEV/ Try

In my fabricjs I am making a canvas and adding an image to it and setting the image as background. and then I am clipping the cavas to some width and height. After I clip the canvas I want a new canvas or same canvas with clipped area as background all covering the canvas with its width and height or can make new canvas with clipped area's height and width Currently I am doing this.. function crop(url, name, left, top, width, height, callback) { var c = document.createElement('canvas') var id = "canvas_" + name c.id = id var canvas = new fabric.Canvas(id) fabric.Image.fromURL(url, function

Hello everyone this is code that ive been working with. It moves an object from A to B. What i am trying to do is have multiple points to which it would move. So from starting position A -> B, then from B -> C and so on. Maybe have some variable which would contain sets of coordinates, which would get fed into some animate function as parameters. But anything i tried resulted only in executing the last command, so it would move straight from A -> C, ignoring B. Any advice/demo appreciated. Javascript var canvas = new fabric.Canvas('scene', { backgroundColor: 'green'}); var triangle = new

I have JSON data with fabric Rect object. When I try to load this JSON data on to fabric canvas with LoadFromJSON , Shapes are loading perfectly but patterns filled in the shapes are not rendering. The patterns are rendered only after clicking on shape. I have copied my code in fabric Kitchen sink execute module and i tried to execute it. But it is also not working as expected. My Code: var jsonD = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":222.92,"top":237,"width":100,"height":100,"fill":{"source":"http://www.convertingquarterly.com/Portals/1/images/industry-news

Right now i am uploading image into canvas and after uploaded image, canvas converted into image by toDataURl. If i am converting canvas into image by toDataURL then i am getting base code(Base Code will be big). I want some small url instead of BaseCode. var canvas = new fabric.Canvas('canvas'); document.getElementById('file').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; var img = document.createElement('img'); img.src = data; img.onload = function () { if (img.width < 300 ||