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() { var height, ratio, width; ratio = 800 / 1177; width = tmpl.$('.canvas-wrapper').width(); height = width / ratio; canvas.setDimensions({ width: width, height: height }); }; Meteor.setTimeout(function() { return resizeCanvas(); }, 100); $(window).resize(resizeCanvas); Here's my zoom function - We zoom the canvas, and then

I am dynamically adding a rect element to crop/clip (using clipTo) a selected element, It works perfect at the first time but when i add a second element to the canvas and begin to crop the second element the first element looses the crop/clip. Below is my code, there are 2 buttons 1 to start crop/clip (places a dynamic rect over the element to be cropped) second to do the cropping/clipping. $('#crop').on('click', function (event) { var left = el.left - object.left; var top = el.top - object.top; left *= 1; top *= 1; var width = el.width * 1; var height = el.height * 1; object.clipTo =

I want to implement eraser in my web app using Fabric.js. Is there any way to implement eraser in Fabric.js? For example, such as in MS Paint? There's no built-in eraser in Fabric and implementing is a bit difficult. The thing about Fabric is that everything is object-based and most of the things are also vector-based. Unlike with native canvas, we can't just erase some pixels on a global bitmap. We have entire object model underneath, and canvas output is a simple loop of all those objects rendered onto canvas. One way we could emulate eraser is perhaps by having some kind of overlay on top

I am trying to implement image mask as example below : Example image here: https://s3-ap-northeast-1.amazonaws.com/utonly/demo/demo.jpg I have tried so many ways and took a lot of time, but still can't find a good solution for it. The image must be able to resizing and rotating inside the mask, or edit from another view, and then apply the result back to the image. I found similar example here http://jsfiddle.net/tbqrn/68/ , but I don't want images pass through each other. Is that possible? Or do I have any chance to try other ways to do this? var img01URL = 'http://fabricjs.com/assets/printio

I'm trying to build a freeform lasso tool to clip an image inside canvas. I'm using fabric.js to draw the shape. var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var img = document.createElement('IMG'); img.onload = function() { var OwnCanv = new fabric.Canvas('c', { isDrawingMode: true }); OwnCanv.freeDrawingBrush.color = "purple" OwnCanv.freeDrawingBrush.width = 4 ctx.clip(); ctx.drawImage(img, 0, 0); } img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi"; <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery

I am using the Textbox of Fabric.js . I have given a fixed width. But if a user types a long word without any space that exceeds the given width of textbox, it does not wrap. Any solution? Yes there is a solution that you may like or not to implement word breaking: override the fabric default function for line breaking: fabric.Textbox.prototype._wrapLine = function(ctx, text, lineIndex) { var lineWidth = 0, lines = [], line = '', words = text.split(' '), word = '', letter = '', offset = 0, infix = ' ', wordWidth = 0, infixWidth = 0, letterWidth = 0, largestWordWidth = 0; for (var i = 0; i <

Have the following issue: Trying to subclass fabric.Group: var CustomGroup = fabric.util.createClass(fabric.Group, { type : 'customGroup', initialize : function(objects, options) { options || ( options = { }); this.callSuper('initialize', objects, options); this.set('customAttribute', options.customAttribute || 'undefinedCustomAttribute'); }, toObject : function() { return fabric.util.object.extend(this.callSuper('toObject'), { customAttribute : this.get('customAttribute') }); }, _render : function(ctx) { this.callSuper('_render', ctx); } }); Testcase: I create a red rectangle and added it to