How to resize text on canvas - html5-canvas

Question

I have found a way to be able to resize and squeeze my text on normal HTML5 Canvas with the following code:
$("input").on("input", function() {
ctx.clearRect(0, 0, 400, 400);
var width = ctx.measureText(text).width;
if(width <= 100) {
ctx.fillText(text, 0, 100);
} else {
ctx.save();
ctx.scale(100 / width, 1);
ctx.fillText(text, 0, 100);
ctx.restore();
}
});
I want to do the same thing but with using the FabricJS. Is there a way that I can do it?

Answer 1

Yeah sure, just check the width of the text element after you've created it and set the ScaleX property if needed before adding it to the canvas:
var canvas = new fabric.Canvas('c');
var t;
canvas.renderAll();
$("input").on("input", function () {
if (t) {
canvas.remove(t);
}
var textToDraw = $(this).val();
t = new fabric.Text(textToDraw, {
left: 0,
top: 0
});
if (t.width > c.width) {
console.log('scale -> ' + (c.width / t.width));
t.setScaleX(c.width / t.width);
}
canvas.add(t);
});
If you wish to do this on object resize, use the modified event handler like so:
function scaleText() {
console.log("scale=" + t.getScaleX() + " w=" + t.getWidth());
if ((t.width * t.getScaleX()) > c.width) {
t.setScaleX(c.width / t.width);
}
}
$("input").on("input", function () {
if (t) {
canvas.remove(t);
}
var textToDraw = $(this).val();
t = new fabric.Text(textToDraw, {
left: 0,
top: 0
});
scaleText();
t.on("modified", function (options) {
scaleText();
});
canvas.add(t);
});