Draw outside bounding box in fabric js

Question

Check this fiddle setting width and height to circle object:

circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 });

so bounding box will be 50*50

its drawing fine for fabricjs 1.5.0, but not in newer version. I want to draw outside bounding box, how can I acheive it?

Answer 1

 var canvas = new fabric.Canvas('c', { selection: false }); var circle, isDown, origX, origY; canvas.on('mouse:down', function(o){ isDown = true; var pointer = canvas.getPointer(oe); origX = pointer.x; origY = pointer.y; circle = new fabric.Circle({ left: pointer.x, top: pointer.y, radius: 1, strokeWidth: 5, stroke: 'red', objectCaching : false, originX: 'center', originY: 'center' }); canvas.add(circle); }); canvas.on('mouse:move', function(o){ if (!isDown) return; var pointer = canvas.getPointer(oe); circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 }); canvas.renderAll(); }); canvas.on('mouse:up', function(o){ isDown = false; }); 

 <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas> 

use objectCaching :false to get the desired effect.

Answer 2

Just change this...

circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 });

To this...

var newAbsValue = Math.abs(origX - pointer.x);
circle.set({ radius: newAbsValue, width : newAbsValue * 2, height : newAbsValue * 2 });

Here's your JSFiddle updated, http://jsfiddle.net/rekrah/8rb8Lahb/ .

Answer 3

I was also facing the same problem. In my case i was trying to draw line outside the bounding box of rectangle. I have validated from other examples that it is not possible to do it in new versions of fabric js. This makes sense as it might cause some other problems. So, you have to figure out something else. In my case i am using path to fulfill my requirement.