fabricjs

Struggling to remove multiple objects from the fabric canvas. Everything seems to be in working order but when the code runs it does not remove the multiple selected objects from the canvas. service.deleteSelectedObject = function () { var selectedObject = service.canvas.getActiveObject(); var selectedMultipleObjects = service.canvas.getActiveGroup(); var data = {}; // get object id // get selected objects from canvas if (selectedObject) { data = { type: 'whiteboard::delete', id: selectedObject.id }; delete service.objectMap[selectedObject.id]; service.canvas.remove(selectedObject); } else {

I trying adjust canvas for each resolution, so I first using css and put medias screens for each resolution. @media screen and (min-width: 320px) { #c { -webkit-transform : scale(0.38); -webkit-transform-origin : 0 0; } https://jsfiddle.net/qj3oyzs8/ It work for me, but all object not drag, resize or rotable properly. One solution is apply zoomOut and zoomIn, eg: http://jsfiddle.net/Q3TMA/662/ Now I need help for know How capture resolution for open correctly canvas scale in the browser EDIT function screencan() { var widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width;

I am using FabricJS to draw circle in canvas: var circle = new fabric.Circle({radius: 100, fill: '', stroke: 'red', strokeWidth: 3, originX: 'center', originY: 'center' }); var text = new fabric.Text('HELLO WORLD.', { fontSize: 30, originX: 'center', originY: 'center', fill : 'red' }); var group = new fabric.Group([ circle, text ], { left: 150, top: 100 }); canvas.add(group); This code draws a normal circle but I need to freely draw circle with mouse. Any code help will be appreciated. According to your previous code for drawing rectangle http://jsfiddle.net/Subhasish2015/8u1cqasa/2/ Here is

When you select an object (in my example a polygon), it gets automatically moved to the Front. I'm searching for a way to prevent the movement on the z-axis or send it backwards after the selection, maybe someone can help? Here is a link to a simple example: http://jsfiddle.net/98cuf9b7/1/ When you select one of the Polygons, it gets moved to the Front. I tried to send it backwards after the selection, but even if the "canvas.sendToBack(object)" function is called, it's still remains in the Front. The code in my Example is: var canvas = new fabric.Canvas('c'); var pol = new fabric.Polygon([ {x

I've a problem with my FabricJS app. By default, the object layer in fabricjs jumps to the top when I select it. I want to disable this option so that the index of the active element not changing. It's possible ? You just need to set the preserveObjectStacking options as shown in the below code when setting up the canvas. var fabricCanvas = new fabric.Canvas("t", { preserveObjectStacking: true }); fabricCanvas .add(new fabric.Rect({ top: 0, left: 0, width: 100, height: 100, fill: "green" })) .add(new fabric.Rect({ top: 50, left: 50, width: 100, height: 100, fill: "red" })) .add(new fabric.Rect

Could anybody know how to rotate around one specified point in fabric.js? For example, var line1 = new fabric.Line([70, 20, 70, 100], { stroke: "#000000", strokeWidth: 6 }); I would like to rotate it based on its end point(70, 100) but not its center. You can achieve a rotation about an arbitrary point using fabric.util.rotatePoint . This will let you rotate a line (defined by x1 , y1 , x2 and y2 ) about an origin (defined by origin_x and origin_y ) by an angle in degrees (defined by angle ). Note that fabric.util.rotatePoint takes a rotation in radians, even though angle s are usually

I am developping a collaborative whiteboard using fabricjs. When a user creates a new fabric object , I serialize it and send it to all other users. var rect = new fabric.Rect(); canvas.add(rect); socket.emit("newObject", JSON.stringify(rect)); // sends the object to other users When those users receive the serialized object, it should be deserialized and added to their canvas. What is the best way to do this? I was not able to find a function that deserializes a single object, only the whole canvas (loadFromJSON), so I implemented an unelegant solution: function drawRoomObjects(roomObjects){