Can I set the inner stroke in js fabric

Question

I am working on a fabricjs application and I need to set the inner stroke on the object, this means applying the stroke to the object without increasing its size.

For example, if I apply strokeWidth 20 to 100 * 100 rect, then the size also increases, but I want if a stroke is applied to the object, then the size will also remain the same

var recta = new fabric.Rect({ left: 10, top: 10, fill: '#000', width: 100, height: 100, }); var rectb = new fabric.Rect({ left: 150, top: 10, fill: '#000', width: 100, height: 100, }); canvas.add(recta, rectb); rectb.set('stroke', '#f00'); rectb.set('strokeWidth', 20); canvas.renderAll(); 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas style="border:#000 1px solid" id="design-canvas" width="500" height="400"> <script type="text/javascript"> canvas = new fabric.Canvas('design-canvas'); </script> 

Is there any way or trick to apply the stroke without increasing the size

Thanks at Advance

Answer 1

Assuming this will only be for rectangles, the best way would probably be to attach 4 lines too much that you update the positions based on these rectangles x, y, width and height. Then you can set the stroked width of these lines separately.

Another way would be to simply resize the control. Take a look at this JSFiddle .

 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', selectable: 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) }); canvas.renderAll(); }); canvas.on('mouse:up', function(o){ isDown = false; });