FAQ Database Discussion Community


HTML5 Canvas created JPEG is “corrupt” or “damaged”?

javascript,php,html5,canvas,fabricjs
I have a simple HTML5 Canvas object that, once saved to a file, opens perfeclty in Photoshop and looks correct, but according to Windows and OSX is "corrupted" or "damaged". The code I'm using is very simple: JavaScript: var dataURL = canvas.toDataURL({ format: 'jpeg', quality: 0.8 }); And then sending...

Fabric JS: How to prevent scaling active group

javascript,fabricjs
in Fabric JS when an object or multiple objects is/are selected, it's possible to scale them. Either in the corner (with aspects) or only width/height. Is it possible to allow this only if an object is selected and prevent this if multiple objects are selected? Thanks in advance!...

Fabricjs svg parsing error

javascript,canvas,svg,fabricjs
guys, i've got a very mysterious problem here. I've got an svg <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='263.342' height='132.29' viewBox='0 0 263.342 132.29'><path fill='#FFC55D' d='M148.718 39.53S152.442 0 199.442 0v57.604l-26.236-18.628-16.908 18.628-.467 42.678s-.99 18.658-20.113 18.658'/><path fill='#FEDBC8' d='M63.44 132.29c-44 0-46.084-38.09-45.903-44.62-1.45 0-11.837-1.268-11.837-9.974 0-13.785 11.74-11.97 11.74-11.97V55.567l-.644-24.077H63.44v100.8zM63.44...

fabric.js resize canvas to fit screen

javascript,android,cordova,canvas,fabricjs
I'm currently developping an application on mobile device (android and iPhone) with ionic and cordova. I would like to edit a picture. I use fabric.js library to do that. Fabric.js converts an image and other items into canvas. Then I add some image on the canvas (stickers) and export it...

How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc…)

javascript,canvas,fabricjs
I want to edit the highlighted characters in a text in canvas using fabric.js, like change its color, font, style etc. just like this http://fabricjs.com/test/misc/itext.html to @user43250937 hey uhm. I tried it and it works! :D thanks. I tried Underline, Bold, Italic, but I have a problem changing the color...

How to change default appearance of Fabric.js resize handles?

javascript,customization,fabricjs
Fabric.js is really handy with its interactive mode that allows manipulating objects like in a vector drawing program such as Inkscape. I would like to use this capacity into my web application project where a kind of collage editor is needed. By default, when an object is selected, the bounding...

How to scale an image down to fit inside a canvas, without distorting the image?

html5,canvas,fabricjs
I have a fabric js canvas that I allow users to add external images to. Often times the user adds images that are too large to fit the canvas and it's a little difficult for them to re-size them correctly. I'd like to automatically scale the larger images down so...

fabric.js : How to make an image in the shape of a circle with white borders

image,html5-canvas,fabricjs
I am using Fabric.js to create some animations on HTML canvas. I need to make this : If I use image element I cannot make it circular and not put white border. If I use circle object I cannot put an image in it. Any ideas will be appreciated. TIA...

How to detect collisions between DOM-draggables and FabricJS shapes

javascript,html5,drag-and-drop,fabricjs
I would like to find object that is already present in the canvas as soon as I drag external image over canvas and it intersects with that canvas object. This is the code I am using for drag and drop: if (Modernizr.draganddrop) { // Browser supports HTML5 DnD. // Bind...

Reduce size of JSON serialized by fabric.js after image resize

javascript,html5-canvas,fabricjs
An image is loaded to the fabric canvas using file input and FileReader. We use scaleToWidth and scaleToHeight to have large photos fit to the canvas. When I use choose a large 3.2MB jpeg the image is nicely resized to 1MB which is what we want. We then prepare the...

Can I apply two shaded color on single image with image filter in fabricjs?

javascript,canvas,fabricjs
I have two shaded colors like this: I want to apply gradient colors on single image with fabric js image filter. Basically I added two palettes for colors. What I need is when I change color from palettes that both colors apply in a single image like the above image....

per pixel image object detection in fabric js

fabricjs
I have been trying to get the per pixel drag and drop feature working using images with fabric.js like in example on their website: http://fabricjs.com/per-pixel-drag-drop/. I would like the object to be detected when a non transparent part is moused over but if I set perpixeltargetfind to true nothing is...

Keeping a portion of an image always visible on the canvas

javascript,html5,fabricjs
I want to make sure that my instance of fabric.Image is always visible. It doesn't need to be 100% visible, but a portion of it should always be seen. I've seen a few other questions that are similar and I've based my solution on them, but I haven't found anything...

Can't load SVG from URL

fabricjs
I want to load different shapes in FabricJS based Canvas using loadSVGFromURL(), but can't. Documentation is also not complete on this. I just want a complete example. I can load it from string, but string creates spaces which creates problems when rendering. Here is my code: var canvas = new...

Fabricjs Effect Image

javascript,fabricjs
I have a picture that I'm carrying on a canvas by fabricjs However need to do the effect indicated in the image below: Anyone have any idea?...

Write amount of angle image rotates on fabric js canvas

canvas,fabricjs
I am working on a Fabric.js project and i m trying to print amount of rotated angle .... Using Fabric.js's function getAngle(). I can get angle, but how to print it on screen? ..as an image There is website printio.ru/classic_tees/new (founder website of fabric.js library)..this is a t-shirt printing website...upload...

Loading and storing svg files in fabricjs

javascript,html5-canvas,fabricjs
I have been able to put together a small test example for loading and displaying SVG files on a canvas with fabricjs. What I would like to do is store the loaded SVG in a variable so it can be added to canvas outside the scope of the loadSVGFromURL callback...

object:scaling is not working with bounding object

javascript,canvas,fabricjs
I am new in Fabric js. can anyone suggest me for restrict scale object within bounding box ? my java-script code is below (function(global) { var canvas = new fabric.Canvas('maincanvas'); var yourNameObjs = []; var goodtop =358, goodleft=250, boundingObject; var boundingObject = new fabric.Rect({ left: 100, top: 90, width: 200,...

remove image from canvas - fabricjs (javascript)

javascript,angularjs,fabricjs
I'm working on web application most of the part has been covered by angular js. I am stuck at a point. I used fabric.js to manipulate images on canvas and it is the best way of doing this. Everything is working fine but I can not add a close button...

How do we set the Minimum width of a canvas object?

fabricjs
I want to set minimum width of a canvas object, and don't allow to scale less than it. I can lock it by "lockScalingX" option but I don't want to do it, because after this I can't enlarge it.

Fabric JS: Copy/paste object on mouse down

javascript,fabricjs
I'm trying to create a block game where you select shapes from a menu and place them on the canvas. There is a shape menu where you can drag the shapes onto the canvas. I would like for it to leave the main shape in the menu as it drags...

Fabric JS pixel by pixel manipulation

javascript,fabricjs
I have overlay image with rectangle transparent hole. Beneath is scalable and draggable image. How to cut only visible part of image ? How to determine size and position of transparent rectangle ? Is it possible to do pixel by pixel alpha channel search only on overlay image ? Any...

Update fabric.js Path points dynamically

javascript,svg,fabricjs
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...

Animating the drawing of a line in the canvas with fabric.js

javascript,canvas,fabricjs
I can draw a line in the canvas using: var myLine = new fabric.Polyline([{x:200,y:200},{x:200,y:200}]) var canvas = new fabric.Canvas('c'); canvas.add(myLine); However, I want to animate the drawing. I tried: myLine.animate("points","[{x:200,y:200},{x:10,y:10}]",{onChange: canvas.renderAll.bind(canvas)}) But it's not working, and I couldn't see any way to animate the drawing of the line using fabric.js...

preventDefault on mouse up

javascript,contextmenu,fabricjs,preventdefault
this code doesn't work. How can I prevent context menu in fabrics? canvas.on('mouse:up', function(options) { if(options.target){ switch(options.e.button){ case 0: // left click break; case 2: // right click options.e.preventDefault(); break; } } }); ...

Fabric.js/Angular - When I change the image of a canvas object, it disappears and then reappears

angularjs,angularjs-directive,fabricjs
What I want to do: Select the object on the canvas Click change image to change the selected image on the canvas What is happening: Image disappears, but reappears as the new image when you try to move the empty area. I have no idea why it's doing this. I...

Bounding box of path wrong position

javascript,fabricjs
I have a problem with several path's that I have saved in my database. It turns out that the bounding box is completely displaced from the object. Someone help me? Path example:...

Fabric.js Image.fromURL not working in Firefox

jquery,meteor,drag-and-drop,jquery-ui-draggable,fabricjs
I am using Fabric.js and jQuery UI for a drag and drop scene creator. When I drag and drop an image into the canvas on Chrome everything works fine. However, when I drag and drop an image on Firefox it does nothing and I get the following error in the...

Not creating json object

javascript,json,fabricjs
I'm playing around with fabric js, I can't seem to find a way too create/view a json object var canvas = new fabric.Canvas('c'); canvas.add(new fabric.Rect({ left: 100, top: 100, width: 50, height: 50, fill: '#faa', originX: 'left', originY: 'top', centeredRotation: true })); canvas.add(new fabric.Circle({ left: 300, top: 300, radius: 50,...

Exception from Tracker afterFlush function: fabric.Canvas is not a constructor

javascript,exception,canvas,meteor,fabricjs
I am developing a fabric.js application via meteor. I have included the file http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js in the project and I try to define a simple canvas as follows, Template.formatter.rendered = function () { var canvas = new fabric.Canvas('fabriccanvas'); //<-- error Line canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100...

Lock to diagonal movement

javascript,html5,fabricjs
How can I lock diagonal movement with FabricJS? I know it can be locked vertical and horizontal, but I can't find an easy way to lock diagonal. What I need is the ability to move one canvas group only in the same X axis or Y axis once a time....

Font name being misparsed in Canvas

html5,canvas,fonts,fabricjs
I'm trying to use a Google font with the unfortunate name of "Slabo 27px" in an HTML Canvas. I'm creating a fabric.js Text object and setting the fontFamily value to the font name. It always draws at the same size regardless of how I set the fontSize. I'm guessing that...

Mask Image based on another image

canvas,html5-canvas,fabricjs
I have urls of two images(png). I need to load them and mask one image based on another. I am using fabricjs library. But I am unable to achieve the desired result so far. My question is that Is it doable using fabricjs? If yes, please point me in the...

FabricJs Ctrl C + Ctrl V

jquery,fabricjs
I'm trying to make a copy paste action using ctrl+c and ctrl+v with fabricjs. I managed to do something. The object that I'm selecting and doing copy paste is copied but if I press again ctrl+v the item is places inside the last one. And if I select items are...

Change background of Canvas in Fabric JS

jquery,html,css,canvas,fabricjs
I am trying to change the background of Canvas. I am able to change the background of canvas but once i click on the background . It reload the original background and does not show the changed background. Hope you understand what i am trying to say. Following is the...

Save canvas created with fabric.js

javascript,html5,canvas,fabricjs
i want to store the canvas generated with the fabric.js, i have canvas as like below in my page <div class="canvas-container" style="width: 600px; height: 600px; position: relative; -moz-user-select: none;"> <canvas height="600" width="600" id="design-stage" class="lower-canvas" style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none;"></canvas> <canvas class="upper-canvas " style="position:...

how to move a image when i drag the other image in the other canvas at same time

javascript,jquery,canvas,html5-canvas,fabricjs
I am using fabric.js to handle two canvases. I also set two canvases to compare two images in a same page. like this: <canvas id="firstImg" width="843" height="1200"></canvas> <canvas id="secondImg" width="843" height="1200"></canvas> I want to move a image when i drag the other image in the other canvas. I mean when...

fabric.js get “edit” state of IText object

javascript,fabricjs
In fabric.js I want to add some key interaction on my canvas. If an IText object is selected I want it to be deleted if I hit the "del" key. I accomplished this by: $('html').keyup(function(e){ if (e.keyCode == 46) { obj = canvas.getActiveObject(); canvas.remove(obj); } }); Now the problem is...

Fabric.js Path object not selectable because of width and height

svg,fabricjs
Using fabric.js I create a Path object like so: var canvas = window._canvas = new fabric.Canvas('c'); canvas.backgroundColor = '#f5f5f5'; var path = new fabric.Path('M 0 20 Q 50 100 100 20',{ stroke: 'black', fill: '' }); canvas.add(path); This works as expected, however, the user can not move the path on...

fabricjs How can i keep fixed size on group elements while others scaling?

javascript,frameworks,html5-canvas,group,fabricjs
Hello i use fabricjs to play with the html canvas. I create the canvas and i add group of objects on it. On a group of objects , i need to keep fixed width & height for some objects while i scale the object. I use the 'object:scaling' event to...

is fabricjs.d.ts really missing animate function?

typescript,fabricjs
I'm new to both fabric and typescript. Now that I'm trying to use the library, I came across a weird error. In my code I tried to do this: var rect = new fabric.Rect(); rect.animate('angle', '-=5', { onChange: this.canvas.renderAll.bind(this.canvas) }); But it's telling me that 'Property animate does not exist...

How can I fire custom events on canvas in Fabric JS?

javascript,html5,canvas,design,fabricjs
How can i fire custom events on canvas in fabric js? I want to register javaScript events on canvas in fabric js....

Canvas export to png does not export backgroundImage

javascript,jquery,canvas,svg,fabricjs
I am trying to export my final render of canvas everything works just fine exception when i set an SVG backgroundImage is completely ignored on export. This is how i set the background image fabric.Object.prototype.transparentCorners = true; fabric.loadSVGFromURL(svg, function (objects, options) { var group = fabric.util.groupSVGElements(objects, options); group.set({ left: 0,...

Fabric js canvas border affects mouse offset

javascript,fabricjs
Using Fabric JS, I have a 100px border as an inline style for my canvas <canvas id='c' style = 'border: solid red 100px;'></canvas> This is causing issues with selecting objects as the mouse position seems to be offset by the border width FIDDLE I have tried to fix the issue...

Preload images that will be drawn on fabric.js canvas

javascript,jquery,fabricjs,preload
Hello I'm building a website where I display images on fabric canvas by hovering over text content on the site. There are many text links connected to many different images. There is always only one image on the canvas being displayed, but there are many in the 'bank'. At every...

I use fabricJs and want to get mouse position in zooming

javascript,fabricjs
I am using fabricJs library to create rectangles and want to get mouse position after zooming I use this code to start drawing the rectangle, in scale = 1, it works right but after i get zoom in for example and click i get the rectangle start point in the...

How do i end an ongoing mouseevent in fabricjs

mouseevent,fabricjs
i am trying to achieve a collision detection with fabricjs. In the example i'm providing, the blue ball should not be able to cross the red line. The collision detection works fine, but i cant figure out how to end the dragging once the collision takes place. I tryed to...

adding custom attributes to fabricjs object

javascript,canvas,fabricjs
Im trying to add a custom attribute to a fabric js object that i have: var trimLine = new fabric.Rect({ width: Math.round(obj.box_dimensions.box.width,2), height: Math.round(obj.box_dimensions.box.height,2), strokeWidth: 1, stroke: 'rgb(255,2,2)', fill: '', selectable: false }); so thats my rectangle im trying to add and i want to pass a name or id...

Callback function executes too late [duplicate]

javascript,fabricjs
This question already has an answer here: Make js closures execute right away 3 answers I am using fabric.js to render images on canvas. Trying to render 3 images with different properties (like localization, source, etc.). for (i = 0; i < 3; i++) { // read data from...

How to add empty itext to canvas where i mouseclicked in fabricjs?

javascript,html5,canvas,fabricjs
I'm working on tool that make seating charts.I'm using fabricjs.i want to add itext to canvas when i clicked on canvas.That itext should be empty.Then i can type whatever i want in itext.i have no idea how to do that.need a solution.thank you.

Arrow shape using FabricJS

javascript,html5-canvas,fabricjs,trigonometry
I am trying to create an arrow using line and triangle shapes. You can check the demo on jsbin: http://jsbin.com/xuyere/1/edit?js,output As you can see from the demo that arrow head's position varies with angle and it's not correct. What am I doing wrong here? Here's the math I used to...

How to add a delete icon functionality for one corner on canvas in fabric js?

canvas,fabricjs
Generally in fabric js the object has scaling and rotating properties,how to add delete functionality?

Why does adding a rect then setting its left and top cause a selectable 'ghost' rect to stay in the old position?

javascript,html5,fabricjs
I'm new to Fabric.js and really liking it, but I'm getting odd behavior trying to run a tutorial example at http://fabricjs.com/fabric-intro-part-1/ . The code is simple: var canvas = new fabric.Canvas('c'); var rect = new fabric.Rect({left: 0, top: 0, fill: 'red', width: 50, height: 50}); var text = new fabric.Text('click\nhere',...

canvas text is not drawn on an image

javascript,canvas,fabricjs
I am using fabric.js to draw an image from an url into a canvas: function addImage(url) { canvas.clear(); fabric.Image.fromURL(url, function(oImg) { oImg.selectable = false; canvas.add(oImg); }); }; works. Now I also want to draw a text on top of that image with this function: function addText(text_to_add) { var ctx =...

Fabricjs canvas reset after zooming

javascript,fabricjs
I have a fabricjs canvas that I need to be able to zoom in and out and also change the image/object inside several times. For this I setup the canvas in the first time the page loads like this: fabric.Object.prototype.hasBorders = false; fabric.Object.prototype.hasControls = false; canvas = new fabric.Canvas('my_canvas', {renderOnAddRemove:...

Fabric.js copy paste of selected group

javascript,canvas,fabricjs
Say I have multiple objects selected on a fabric.js canvas and can get this group of objects using getActiveGroup. Can anyone provide an example of how to copy and paste the group into a new group, where: (a) each object in the copied group retains its relative position to the...

How to prevent activated mousedown event by function?

javascript,jquery,svg,fabricjs
function itext(){ function addText() { canvas.on('mouse:up', function(options) { var left1=Math.round(options.e.clientX)-139; var top1=Math.round(options.e.clientY)-250; var newText = new fabric.IText("",{ left:left1, top:top1 }); canvas.add(newText); canvas.setActiveObject(newText); newText.enterEditing(); newText.selectAll(); }); } canvas.on('mouse:down', addText); } I want add some itext to canvas when i click on canvas.i do that using this function.after execute this function that...

Alternative of Eraser Tool(Fabric js) for a open source Eraser tool

javascript,php,paint,fabricjs
I want to create an online drawing tool using fabric js deployed in a PHP web page.Most of the customized tools of fabric,js, i created successfully. But i cannot create Eraser tool like in MS Paint eraser.. I found this alternative method for eraser.This will do mask whilte color in...

What can I get a handle on the target of a fabric js event?

fabricjs
In this fabricjs tutorial section it says shows putting listeners right on an object like so var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' }); rect.on('selected', function() { console.log('selected a rectangle'); }); That is fine, but I don't want to log a string to the console. I...

Fabric.js setHeight() and scaleToHeight() gives different height values

javascript,html5-canvas,fabricjs
I have an issue with image resizing. I want to resize an image but without keeping ratio. When I'm using setHeight() it gives me wrong value. image.setHeight(100); image.getHeight(); // gives me 140px output When I'm using scale function all is correct, but it keeps image ratio also image.scaleToHeight(100); image.getHeight(); //...

Fabric.js Draw_grid Cannot read property 'moveTo' of undefined

javascript,html5,canvas,fabricjs
I've just started with fabric.js, and I want to draw a grid I've found this function but, I have the error : "Cannot read property 'moveTo' of undefined , I suppose I'm not in the correct scope, maybe I'm not sure... this is my code: <html> <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>...

fabricjs: how to show object size after scaling

javascript,jquery,wordpress,woocommerce,fabricjs
I am using wordpress plugin called "Woocommerce Product Designer" which includes a JavaScript library called fabicjs in version 1.4.9. I need a way to show the width and height of an object in fabric after (or while) I re-scale them. I made some adjustments directly in file fabric-all.min.js: _beforeTransform: function...

Underscore extend method and fabric.js subclass

javascript,underscore.js,fabricjs
I've created an object that contains some common methods I will need across classes: var PathBased = { appendPoint: function(point) { var lastPointIndex = this.getLastPointIndex(); this.addPointAfterIndex(point, lastPointIndex); }, getPointByIndex: function(index) { var pointX, pointY; if (index == 0) { pointX = this.path[index][1]; pointY = this.path[index][2]; } else { pointX =...

intersectsWithObject() doesn't seem to work with objects in groups

collision-detection,fabricjs
I have a Fabric.js canvas with a group of shapes on it (a "token") and a rectangle that I'm going to drag the token onto (a "platform"). Dragging the token onto the platform will make various things happen. When I call token.intersectsWithObject(platform), everything works great. But I'm going to have...

How to join an edge of fabric.js Path to a circle?

fabricjs
I found an example for quadratic curve in the fabric.js website. I want to join a fabric.js circle with one of the edges of the quadratic curve. Is there a way to do it. If I group the point representing one of the edges with say a circle, the point...

Canvas image not appearing in IE10 and below

javascript,html5,canvas,fabricjs
No idea what I'm doing wrong here, but apparently I've upset IE10 somehow. I've got a bit of FabricJS that looks simple enough. It works in everything except IE10 and below. Not sure why? var canvas = new fabric.Canvas('imageCanvas', { backgroundColor: 'rgb(240,240,240)' }); var imgElement = document.getElementById('imageSource'); var fabricImg =...

Fabric.js Images blurry

javascript,jquery,canvas,jquery-ui-draggable,fabricjs
I am using Fabric.js and jQuery UI for a drag and drop scene creator. When I drag and drop an image into the canvas the image becomes blurry/pixelated and appears to be zoomed in. I've been searching Stackoverflow and Google forever and can't find any solutions. I'd appreciate any suggestions...

fabricjs - Zoom canvas in viewport (possible?)

javascript,html5,zoom,fabricjs
at the moment I try to implement a zoom-functionallity to a visual-editor based on the fabricjs-framework. I've looked around but got more and more confused as I recognized that the development of this feature/function was a long and rocky road for the community and developers. Because of that, many solutions...

fabric.js - Circle don't work if properties defined outside of new fabric.Circle() brackets

javascript,canvas,fabricjs
When I create a new circle object wit properties in the brackets no problem appears when a circle needs to be generated. (old way) function vanillaObjectFunc(type) { if (type === 'Rect') { var tObject = new fabric.Rect({ width: 50, height: 50, opacity: 0.8, fill: 'black', left: canvasB.width / 2, top:...

How to reduce lag in fabric.js recursion-based function

javascript,jquery,recursion,fabricjs,lag
I am animating boxes using fabric.js to appear (canvas.add) onscreen as though they are being stitched on (see image). Due to the nature of the thing, I've implemented a recurring function with a timer. As it runs, the more it starts to lag. I'd like to know if there's a...

Scale fabric.js canvas objects

javascript,canvas,meteor,html5-canvas,fabricjs
I have a fabric.js canvas on my page, that I'd like to be responsive. My code works for scaling the canvas itself, but not the objects I've drawn on it. Any idea? I've searched SO but couldn't find a solution that worked for me. var resizeCanvas; resizeCanvas = function() {...

FabricJS - Change Rotation Icon Line Height?

jquery,canvas,fabricjs
I'd like to change the line height of the rotation icon, an example given on this image: http://i.imgur.com/RDcQgpv.jpg I'm unsure on how to do this, I've checked drawControls and the customisation section on the fabricJS website to no avail. Could anyone offer any assistance please?...

Identify when user clicks on an object on the canvas

javascript,fabricjs
I am creating an application where when the user clicks on the canvas, a draggable rectangle object is created on the coordinates of the mouse click. I have successfully achieved this but the issue I am having is every time I try to adjust or drag the already added rectangles...

How can I find an object with fabricjs

javascript,fabricjs
I have circles on my webpage, and I want to find a circle and then draw a line to another circle. Is this possible with FabricJS?...

How to give browser “save image as” option to button

javascript,jquery,fabricjs
I'm working on a canvas drawing project.i convert the canvas as an image.then i save that image as '.png'.so i have to right click on the image and select the 'save image as' option.but i want to set that option to a button.when i click the button it should be...

How to scale a pattern before fill in fabricjs

html5,image,image-processing,html5-canvas,fabricjs
I'm trying to fill a polygon with a pattern that is larger than the polygon itself. I want to scale down the pattern before filling the polygon with it but I can't figure out how. I can certainly resize the file pattern file before it's loaded but I was wondering...

How to load TIFF image with fabric.js?

javascript,canvas,fabricjs
From what I can tell, fabric.js can only load either JPG or PNG files. It fails when I try to load a TIFF file. Any idea? fabric.Image.fromURL('my_image.tif', function(oImg) { canvas.add(oImg); }); ...

setZoom and getZoom are undefined

fabricjs
I have created a canvas object but when I try to use getZoom() and setZoom it says that they are undefined. canvas = new fabric.Canvas(); new fabric.Image.fromURL(url, function (omg){ canvas.add(omg); }); canvas.setZoom(canvas.getZoom()*1.1); Am I doing something wrong?...

Image zoom centered on mouse position

javascript,html,canvas,graphics,fabricjs
I am writing a script with Fabric.js to zoom an image at the current mouse position. I have made some progress but there is an error somewhere. Case 1: Keep the mouse at one point and zoom with the mouse wheel. Result: Works perfectly, image zooms at that particular pixel....

fabricjs how i can make an angle measurement?

fabricjs
i want to use fabricjs for create an Object and can measure some images sections . Update: I follow sample of http://fabricjs.com/stickman/ and seems I have something but need to improve more here is what i have https://jsfiddle.net/mavirroco/gtfw58st/ (function () { var canvas = this.__canvas = new fabric.Canvas('c', { selection:...

How to remove blue border around objects in Fabric.js

javascript,fabricjs
I want to draw group of objects in center of canvas. But when I use addWithUpdate method - all objects whithin group has blue border. But if try to use add method of group - blue border gone, but I don't know how move group to center in this case....