fabricjs

I'm evaluating Fabric.js as an alternative to Raphael.js for creating interactive visualisations that are compatible with IE8, which doesn't support SVG or canvas (IE8 support is non-negotiable unfortunately). Raphael can be made to work with the visualisation library D3.js - which outputs SVG and is incompatible with IE8 - via the bridging library D34Raphael , a fork of D3 adapted for use with Raphael. D34Raphael adapts some (but not all) D3 features to output into Raphael's abstracted objects instead of the DOM, so that, on IE8, Raphael can interpret D3's output as VML. (edit Feb 2014 -

In my fabric application, I'm currently listening for certain key presses such as the delete key, and deleting any selected elements. My method of listening for key presses is: document.onkeydown = function(e) { if (46 === e.keyCode) { // 46 is Delete key // do stuff to delete selected elements } I'm running into a problem though: I have other elements like text boxes on the page, and when typing in a text box, I don't want the delete key to delete any elements. In this question , there's a method described to attach an event listener to an HTML5 canvas: canvas.tabIndex = 1000; allows you to

I'm trying to mask an object using Fabric.js free drawing brush. It works fine if the object is in its default position and without any transformations. But once I add transformations to the object, the mask is placed in the wrong position. I'm not sure how to solve this. Can someone take a look? I want to be able to apply any transformations, before or after the mask, without messing up the mask. let canvas = new fabric.Canvas("canvas", { backgroundColor: "lightgray", width: 1280, height: 720, preserveObjectStacking: true, selection: false, stateful: true }); canvas.isDrawingMode = true;

I'm using Fabric.js and I've created a fabric canvas object at one place. var x = new fabric.Canvas("mycanvas"); Now at another place, I want to access this object where 'x' won't be available. So how can I get the same fabric canvas object. I don't wanna change the scope of x or pass x as arg. Also, how to get the toDataURL from the fabric canvas object? Assuming that mycanvas is the ID of a Canvas element, you could store the reference to the fabric object on the Canvas element itself: var x = new fabric.Canvas("mycanvas"); document.getElementById("mycanvas").fabric = x; You can then

i am using clip to define drawing area on canvas . when user moves inside object in out defined area then element are not visible but when i save canvas as image they are coming in picture . how can i avoid overflowing ? or restric elements move ?? page screen shot: Saved image :: This can be done using two ways: 1) Clipping the the canvas area within a Rectangle canvas.clipTo = function(ctx) { ctx.beginPath(); var rect = new fabric.Rect({ fill: 'red', opacity: 0, left: 0, top: 0, width: canvas.width, height: canvas.height }); ctx.strokeStyle = 'black'; rect.render(ctx); ctx.stroke(); } 2)

I'm using fabric.js and loading a number of SVG files into it. I have no problem displaying one of these imported files using this code; fabric.loadSVGFromURL('ico-svg/drink.svg', function(objects, options) { var drink = fabric.util.groupSVGElements(objects, options); drink.set({left: 80, top: 175, width: 32, height: 32 }); canvas.add(drink); canvas.calcOffset(); canvas.renderAll(); }); However, when I repeat this code, the page only shows one of the two SVGs, and they actually change upon page refresh - only one icon will show one time, one icon will show the other, on the odd occasion they