I have created fabricJS object (fabric.Text) successfully. But now I want that object with fixed height and width. Currently when I edits text of the object, it(object) is scaled. But now I want object with fixed height and width. And when I edits text, text should be condense (reduce width of text and decrease size of spacing) and height and width of object should be fixed. Here is reference link (in which center text is what I have to develop). Here is my code.
$(function () {
var fontfamily = 'Arial';
var fontsize = 30;
var fontspacing = $('#fontspacing').val();
var canvas = new fabric.Canvas('c');
var text = new fabric.Text($('#text').val(), {
top: 250,
left: 250,
centeredScaling: true,
hasControls: true,
hasBorders: false,
textAlign: 'center',
fontSize: fontsize,
fontFamily: fontfamily,
originX: 'center'
});
canvas.add(text).renderAll();
$('#text').on('keyup', function () {
canvas.setActiveObject(canvas.item(canvas.getObjects().length - 1));
var obj = canvas.getActiveObject();
if (obj) {
obj.setText($('#text').val());
canvas.renderAll();
}
});
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
</head>
<body>
<div class="row">
<div class="row canvas-container" style="width: 50%; float: left;">
<canvas id="c" width="500" height="500" style="border:1px dotted #000; border-radius: 50%;"></canvas><br>
</div>
<div class="row" style="float: left; width: 50%; height: 150px; background-color: violet;">
Text :
<input type="text" id="text" /><br>
</div>
</div>
</body>
</html>