fabricjs

The following code gives me coordinates of control corners but I want to calculate the coordinates of vertices of triangle, pentagon, hexagon etc., <!-- fabric js function to return coordinates--> function getCoords(oCoords) { return { tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y), tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y), bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y), br: new fabric.Point(oCoords.br.x, oCoords.br.y) } } <!--fabric js event handler--> canvas.on('mouse:move', function(e){ console.log('over1',e.target) if(e.target && e.target !== canvas.getActiveObject()) canvas

Started using fabric.js and trying to add a canvas inside another canvas, so that the top canvas stays constant and I'll add objects to inner canvas. Here is the snippet of adding a canvas to another canvas. canvas = new fabric.Canvas('artcanvas'); innerCanvas = new fabric.Canvas("innerCanvas"); canvas.add(innerCanvas); and my html looks like this <canvas id="artcanvas" width="500" height="500"></canvas> <canvas id="innerCanvas" width="200" height="200" ></canvas> Once adding these successfully, what I am going to do is , add the coordinates to the inner canvas, so that it looks like one on

I'm using this script: var canvas = new fabric.Canvas('game_canvas', { selection: false }); fabric.Image.fromURL('images/bg.jpg', function(img) { img.set('left', 1024/2).set('top', 600/2).set('zindex', 0); canvas.add(img); }); fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) { img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1); canvas.add(img); }); fabric.Image.fromURL('images/player-board.png', function(img) { img.set('left', 254/2).set('top', (122/2)).set('zindex', 2); canvas.add(img); }); fabric.Image.fromURL('images/player-board-top-red.png', function(img) { img

I am drawing polygon by capturing mouse clicks on canvas and then passing these points to fabric.Polygon . So, in this manner I'm drawing multiple polygons. What I need know is, I want to get the mouse co-ordinates (pixel points on canvas) for the polygon which is selected now? I have tried with: canvas.getActiveObject().get('points'); But this is giving some negative and some positive values. So, can u please tell me a way to find out the polygon points? Polygon points are relative to its center so you can get their "absolute" position like so: var polygon = canvas.getActiveObject(); var

How to implement crop tool on the image that is loaded on the canvas using fabric.js ? I have a image loaded on the canvas .Now i want to implement crop tool where the user is allowed to crop the image and reload it on to the canvas when he is done. Tom In Summary set el.selectable = false draw a rectangle on it with mouse event get rectangle left/top and width/height then use the following function Sorry, let me explain. The ctx.rect will crop the image from the center point of the object. Also the scaleX factor should be taken into account. x = select_el.left - object.left; y = select_el.top

I've recently started to use Fabric.js for a project and it's great. It provides an abstraction layer for the canvas, and has an entire 'object manipulation layer/mask' that accompanies each object. I'd like to take it a step further and leverage it to make actual diagrams, with connections between objects, as well as have more 'metadata' that accompanies each object. Has anyone already done this already? Is Fabric.js the right choice for this? Any thoughts on how I would approach creating 'connector' objects between two objects that respond to events from the objects they're attached to? It's

How can I pan and zoom using fabricjs? I've tried using the methods zoomToPoint and setZoom but they do not work for panning. Once I start using different zoom points I start having trouble. $('#zoomIn').click(function(){ canvas.setZoom(canvas.getZoom() * 1.1 ) ; }) ; $('#zoomOut').click(function(){ canvas.setZoom(canvas.getZoom() / 1.1 ) ; }) ; $('#goRight').click(function(){ //Need to implement }) ; $('#goLeft').click(function(){ //Need to implement }) ; http://jsfiddle.net/hdramos/ux16013L/ Solved it using: relativePan() absolutePan() [Update] $('#goRight').click(function(){ var units = 10