Create a Rectangle dynamic direction - fabricjs

Question

I'm trying to make a function that exactly does this direction drop in the rectangle, could anyone help me?
I do not know how I can break the rectangle from the horizontal direction to the vertical.
I have no idea how I'm going to break the rectangle and add a new new rectangle.
Maybe I have to use only separate lines?
How can I make the drawing the same?
If anyone can help me! I am desperate!
IMAGE example LINK HERE !!!!
<script>
$(document).ready(function () {
var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
var rect, isDown, origX, origY, freeDrawing = true, textVal, activeObj;
var isRectActive = true;
var rectangle = document.getElementById('rect');
var obj_selecionado = false;
var started = false;
var prvX = -300;
var prvY = -300;
rectangle.addEventListener('click', function () {
isRectActive = !isRectActive;
});
canvas.on('mouse:down', function (o) {
if (freeDrawing) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
prvX = pointer.x;
prvY = pointer.y;
started = true;
if (isRectActive) {
rect = new fabric.Rect({
left: origX,
top: origY,
width: pointer.x - origX,
height: pointer.y - origY,
fill: '',
stroke: 'gray',
type: 'rect',
uuid: generateUUID(),
strokeWidth: 1
});
canvas.add(rect);
activeObj = rect;
}
}
});
canvas.on('mouse:move', function (o) {
if (isDown && freeDrawing) {
var pointer = canvas.getPointer(o.e);
if (!started) return;
if (isRectActive) {
//HERE ADD SOMETHING TO BREAK RECTANGLE
var dx = pointer.x - prvX;
var dy = pointer.y - prvY;
if (Math.abs(dx) > Math.abs(dy)) {
rect.set({ width: dx });
rect.set({ height: 120 });
} else {
rect.set({ width: 120 });
rect.set({ height: dy });
}
}
canvas.renderAll();
}
});
canvas.on('mouse:up', function (o) {
started = false;
if (freeDrawing) {
isDown = false;
var pointer = canvas.getPointer(o.e);
if (pointer.x === origX || pointer.y === origY || obj_selecionado === true) {
canvas.remove(rect);
obj_selecionado = false;
return false;
}
}
});
});
</script>
<canvas id='canvas' width="2024" height="1024"></canvas>

Answer 1

Create a polyline or polygon object instead of rectangle.
DEMO
var canvas = new fabric.Canvas('c');
var points = [{x:50,y:50},{x:200,y:50},{x:200,y:160},{x:300,y:160},{x:300,y:250},{x:100,y:250},{x:100,y:125},{x:50,y:125}];
var polygon = new fabric.Polygon(points, {
stroke: 'black',
fill: ''
});
canvas.add(polygon);
canvas {
border: 1px solid #f00;
margin: 0px;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>