How to get Text object font-size after modifying object

Question

How can I get Text object font size after modifying object in fabric.js?

Below is my code.

var text = new fabric.Text(imgText, {
            


        

Answer 1

Here is the way to match Fabric.js font transforms to CSS transforms: https://jsfiddle.net/mmalex/evpky3tn/

The solution is to match transformations of texts, not trying to adjust font size.

---

Step 1 - Prepare scene, compose canvas, group text with rectangle, let user manipulate this group, rotate and scale it.

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 50,
    height: 50,
    left: 90,
    top: 120,
    fill: 'rgba(255,0,0,0.25)'
});

var text = new fabric.Text("123", {
    left: rect.left,
    top: rect.top,
    fontSize: 15,
    fontFamily: 'Verdana',
    fill: 'black'
});

text.scaleToWidth(rect.width);
canvas.add(text);

var group = new fabric.Group([rect, text], {
    originX: 'center',
    originY: 'center',
    angle: 25,
    scaleY: 1.7
});

canvas.add(group);
canvas.renderAll();

Step 2 - prepare DIV style for scaling

.scaled {  // this style is applied to DIV element with text
    ...
    font-size: 15px; // Fabric.js text is also 15px size
    transform: scale(1, 1); // define initial transform
    transition: all 0.25s linear; // let it animate
    ...
}

Step 3 - Evaluate Fabric.js transforms and apply CSS on DIV element, for example:

element.style {
    transform: rotate(25deg) scale(1.74774, 2.97116); 
}

The solution (aka button handler) converts Fabric.js transform to CSS transform:

function matchCssTransform() {
    let textScale = text.getTotalObjectScaling();
    let pixelRatio = window.devicePixelRatio;
    let styleStr = `rotate(${group.angle}deg) scale(${textScale.scaleX / pixelRatio}, ${textScale.scaleY / pixelRatio}) `;
    document.getElementById("scaled").style.transform = styleStr;
}