Search Posts

Category: fabricjs

Fabricjs: Background Image not rendering on undo

I am implementing undo feature in my canvas and I am stuck on the background image property. I am using this to save the current state of canvas var myjson = JSON.stringify(canvas); $rootScope.state.push(myjson); $rootScope.mods++; On undo, I am getting this state and loading using this code: $rootScope.undo = function () { canvas.clear().renderAll(); canvas.loadFromJSON($rootScope.state[$rootScope.mods – 1], function(){ canvas.renderAll(); }); } Everything is working fine except background image do not render at all. Please help. This is […]

Load heavy SVG (around 10k vector object) into canvas

We want to load heavy SVG’s JSON object (around 10k vector object) into the canvas. Right now we are able to do but the process is lagging very much due to numbers of vector object in canvas. Below is the flow we are following Load SVG which is saved in the database as the JSON object in the canvas So the user can edit. Convert the canvas in SVG. Save the edited SVG in the […]

Save image from clipped rectangle in FabricJS

I’m using clipTo function to clip an background image inside a rectangle. Before using clipTo function,i was able to save image successfully from canvas with proper height and width. But after introducing clipTo function, I’m able to save image, but the background image appeared in final(saved) image looks weird. The color of canvas also appeared in final image. Following is the image of my canvas. See my final image,it has 1200 X 1200 dimension. (Here […]

Color picket with Linear gradient and radial gradient with fabricjs

I would like to know if someone can help me , how can we implement radial gradient and linear gradient using color picker along with fabric js. if you refer to this fiddle , here there is color picker , but like to know how we can get gradients also added to the color picker- enter link description here var canvas; $(function () { canvas = window._canvas = new fabric.Canvas(‘canvas’); canvas.backgroundColor = ‘#efefef’; canvas.renderAll(); document.getElementById(‘freedraw’).addEventListener(‘click’, […]

Fabric multiple group using same objects with out any conflict

I want to create multiple group using same objects but want them to work independently while I am changing any objects it should not be changed in other group using fabric js. As an example, When I am running my fiddle the text is “Default Text” then I am ungrouping it and editing the text,then after group if I add a new group using button then new group text is edited text of previous group,but […]

Angular ng-model update the value in textbox in canvas

Canvas loaded from json with Added Text. I want to update the update text on entering the data in Textbox outside the canvas. Attached the fiddle. Any help <div ng-app ng-controller=”LoginController” > <div>Hello {{ user.firstName }}</div> <input ng-model=”user.firstName”> <div ng-repeat=”login in logins”>{{ login }}</div> <canvas id=”c” width=”500″ height=”500″></canvas> <br/> </div> Source: AngularJS

AngulaJS + FabricJS + ASP.MVC

I create project asp.mvc and add angularjs and add fabricjs Now i catch error in console: Error: [$injector:unpr] Unknown provider: FabricProvider <- Fabric <- ExampleCtrl My app.js: var app = angular.module(‘myApp’, [‘ngRoute’, ‘ngResource’]); angular.module(‘example’, [ ‘common.fabric’, ‘common.fabric.utilities’, ‘common.fabric.constants’ ]).controller(‘ExampleCtrl’, [‘$scope’, ‘Fabric’, ‘FabricConstants’, ‘Keypress’, function ($scope, Fabric, FabricConstants, Keypress) { $scope.fabric = {}; $scope.FabricConstants = FabricConstants; // // Creating Canvas Objects // ================================================================ $scope.addShape = function (path) { $scope.fabric.addShape(‘’); }; $scope.addImage = function (image) { […]

How do I read a JSON file in Angular?

I am trying to load a JSON file from local disk and use the data from it to fill a FabricJS canvas. I have problems on getting the data from the file. This is what i have till now. app.html <input type=”file” accept=”.json” id=”fileInput” (change)=”loadFile($event)”/> app.ts loadFile(event) { const eventObj: MSInputMethodContext = <MSInputMethodContext> event; const target: HTMLInputElement = <HTMLInputElement>; const files: FileList = target.files; this.file = files[0]; const reader = new FileReader(); reader.readAsText(this.file, ‘utf8’); […]