fabricjs

I have a Fabric.js canvas . I also have a javascript that has a function that gets called when a button is pressed. I know how to get the active object, canvas.getActiveObject() , but i don't know how to just change a value in it without having to make a clone and deleting the original. The reason why i just want to change the original is because when the button is pressed again, weird things happen. Any clue on how to do this? Kienz There are many getters and setters for values: object.setWidth(val); object.setHeight(val); object.setStrokeWidth(val); object.setLeft(val); object.setTop(val);

I want draw a fabric.Polygon with mouse interaction in Fabric.js. I made a small jsfiddle to show my actual state: http://jsfiddle.net/Kienz/ujefxh7w/ After pressing the ESC key, the "interactive draw mode" is canceled and the polygon is finalized. But now the position of the polygon is wrong (controls are right). Has anyone an idea? Problem definition When the polygon is added as static object (in sense that the points won't be modified) it's left, right, minX, minY, width, height and center point can be calculated based on provided points. But when one wants a polygon to be created

I'm trying to add points to a path object dynamically. When I do, the path renders correctly, but the bounding rectangle never gets updated, making it nearly impossible for a user to select and move the path on canvas. As you can see in the code below, the path is initially created with a single point, then I dynamically add a second point as well as a control point. After doing this, the bounding rectangle never updates: var canvas = new fabric.Canvas('c'); canvas.backgroundColor = '#f5f5f5'; var path = new fabric.Path('M 0 20',{ left: 100, top: 100, stroke: 'black', fill: '' }); canvas.add

I'm trying to convert svg to png images using phantomjs : var page = require('webpage').create(); page.evaluate(function() { var svg = '<svg class="tnt_tracks_svg" width="800" height="180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/\ xlink"><rect width="10" height="10" fill="red"></rect></svg>'; var src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg))); var img = new Image(); img.src = src; img.onload = function() { var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var context = canvas

The initialize method is called but render method is not. I read about subclassing on the fabricjs website and looked at that demo . I really don't understand what is missing in my code. var CustomCircle = fabric.util.createClass(fabric.Object, { type: "customCircle", initialize: function (options) { this.callSuper('initialize', options); }, _render: function (ctx) { ctx.beginPath(); ctx.arc(100, 250, 50, 0, 2 * Math.PI, false); ctx.fillStyle = 'green'; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = '#003300'; ctx.stroke(); } }); var customCircle = new CustomCircle(); canvas.add(customCircle

I am using fabricjs and I have a JSON list of images. each element represents an image with info such as left, top etc for each image. in my javascript code I have the following for (var j = 0; j < ChrImages.d.length; j++) { var obj = ChrImages.d[j]; fabric.util.loadImage(obj.URL, function (img) { var customImage = new fabric.CustomImage(img, { name: obj.Name, rot: obj.Rotation, rawURL: obj.RawURL, belongsto: obj.BelongsTo,left:obj.PosX,top:obj.PosY,angle:obj.Rotation }); //customImage.set({ // left: obj.PosX, // top: obj.PosY, // angle: obj.Rotation, // lockScalingX: true, // lockScalingY: