How to keep border width even when object is expanded - fabricjs

Question

My objective in this jsfiddle is to have a Fabric object (for example, a rect) that will "visually" keep its original border width even when it is scaled/expanded. For example, let's say that strokeWidth = 3px; usually when a rect is expanded the user will see the border wider. In my case I need the border to keep its width in screen pixels.
To achieve that, I calculate a factor factorHeight = origHeight / obj.getHeight() every time the object is scaled, and multiply strokeWidth by this factor. This works well when the object is scaled proportionally (try it in the jsfiddle).
However, when the object is not scaled proportionally, the problem is that the top/bottom border widths are different from the right/left border widths. Since there's a single strokeWidth for all these borders I cannot change this behavior. Any ideas?
Javascript:
var canvas = new fabric.Canvas('c' );
var origWidth = 40;
var origHeight = 100;
var origStrokeWidth = 3;
var rect = new fabric.Rect({
top: 30,
left: 30,
width: origWidth,
height: origHeight,
fill: 'rgba(255,255,255,0)',
strokeWidth: origStrokeWidth,
stroke: '#000000'
});
canvas.add(rect);
canvas.on('object:scaling', onObjectScaled);
function onObjectScaled(e) {
var obj = e.target;
var factorHeight = origHeight / obj.getHeight();
var factorWidth = origWidth / obj.getWidth();
var factor;
if (factorHeight < factorWidth)
factor = factorHeight;
else
factor = factorWidth;
var newStrokeWidth = origStrokeWidth * factor;
obj.setStrokeWidth(newStrokeWidth);
canvas.renderAll();
}

Answer 1

I had the same problem, this is the solution I found somewhere here on SO, but I cant provide you with the link to question, but here is the code that solved it:
canvas.on({
'object:scaling': function(e) {
var obj = e.target;
obj.KeepStrokeWidth = 5;
if(obj.KeepStrokeWidth){
var newStrokeWidth = obj.KeepStrokeWidth / ((obj.scaleX + obj.scaleY) / 2);
obj.set('strokeWidth',newStrokeWidth);
}
}
});
Hope it will work for you too.