fabricjs

I want to make image curve with html5 tool. I am using Fabric.js for the html5 canvas tool. Please guide me on how to make curved image on image like mug, glass, cylindrical or circular type of products. Ref. image is below: http://vsdemo.cwwws.com/Images/ProductImages/asdasd.jpg What you are desiring is called 'perspective warping' and is not available in native 2D canvas. You can achieve your effect by drawing 1 pixel wide vertical strips of your image with the appropriate Y-offsets. Here's an outline of how to do it to give you a starting point: Create an array of y-offsets that form your

When am trying to load the JSON data onto the canvas , every shape is getting loaded but the patterns that are filled in the shapes are loaded only after I click on the shape. Could some one please explain why this is happening ? Even i checked this: canvas2.loadFromJSON(json,canvas2.renderAll.bind(canvas2)); Also, the same problem is with the clone() function : The Object is duplicated. But the pattern filled in the object is shown only after I click on the object. Iam using version 1.3.7 I have found a "temporary" solution, and it works for me in IE9 and google chrome. My solution is delay

I am trying to load a json object which has a image object. Image object is having base 64 image data as background. But i am unable laod the loadFromJSON method. Code: var jsonDataSet = '{"objects":[{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":700,"height":600,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":false,"hasControls":true,"hasBorders":true,"hasRotatingPoint"

I am working on fabric js application & I need to increase/decrease the font size when we resize the font with mouse my tried code var canvas = new fabric.Canvas('canvas'); $(document).ready(function() { $('#text-font-size').keyup(function() { var val = $(this).val(); if (isNaN(val)) { alert('please enter number'); $(this).val(''); } var activeObject = canvas.getActiveObject(); activeObject.fontSize = val; canvas.renderAll(); }); $('#add-text-btn').click(function() { if ($('#text-font-size').val()) { var txtfontsize = $('#text-font-size').val(); } else { var txtfontsize = 40; } var message = $

I'm trying to determine when a fabric.Rect overlaps another fabric.Rect while observing the 'object:moving' event but having inconsistent results between fabric.Group vs fabric.Rect When I move Group over a Rect instance the intersectsWithObject method returns true, but when I'm moving a Rect instance over another Rect instance it returns false. I'm wondering if I'm doing something wrong here. Here's my event handler cvs.observe('object:moving', function(e) { var targ = e.target; // filter out itself var items = cvs.getObjects().filter(function(o){ return targ !== o; }); var hit = false; for

I have a canvas with an addable objects, as well as Undo and Redo buttons. As you can see in my example, I'm able to undo/redo 1 time but things break; by this I mean I can add an object and remove it but if for example I move the added object and hit undo, it should move to where I had it previously but instead it disappears from the canvas. I'm using fabric.js 1.7.22. My Code: var canvas = this.__canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey', centeredScaling: true }); canvas.setWidth(400); canvas.setHeight(600); canvas. preserveObjectStacking = true; // Add Text function

My original size of the canvas is 800X700 . I am using clipTo to work in a selected portion of a canvas: var rect = new fabric.Rect({ left: 100, top: 50, fill: '#fff', width: 376, height: 602, strokeWidth: 0, selectable: false }); rect.set({ clipFor: 'mainCanvas', }); I make sure all the images and text fall within this portion of the canvas. What I want to Do: I want to scale up this portion of canvas to a width and height of 1500X2400 so that it can be used for printing I am using the below toDataURL function with multiplier as 3 var imgData= canvas.toDataURL({ format: 'png', width: 376,

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 a clone onto the canvas. Is this possible? I have created a jsfiddle to help. JSFIDDLE window.canvas = new fabric.Canvas('fabriccanvas'); var edgedetection = 10; //pixels to snap canvas.selection = false; window.addEventListener('resize', resizeCanvas, false); function resizeCanvas() { canvas.setHeight(window.innerHeight); canvas.setWidth(window.innerWidth);