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

Below is my code.

var text = new fabric.Text(imgText, {
                left: 10,
                top: 5,
                fontSize: 15,
                fontFamily: 'Verdana',
                fill: 'white'
            });
            text.scaleToWidth(canvas.width * 0.5);
            text.setControlsVisibility(canvasConfig);
            canvas.add(text);
            canvas.renderAll();
var objects = canvas.getActiveObject();

            var obj = objects;
            if (!obj) {
                return;
            }
            //console.log(obj.get('fontSize') *= obj.scaleX); 
            var angle = obj.get('angle');

            var objWidth = obj.get('width') * obj.scaleX;
            var objWidthPercent = objWidth / canvas.width * 100;

            var objHeight = obj.get('height') * obj.scaleY;
            var objHeightPercent = objHeight / canvas.height * 100;

            var bound = obj.getBoundingRect();
            var objLeft = obj.get('left') / canvas.width * 100;
            var objTop = obj.get('top') / canvas.height * 100;

            var newfontsize = obj.fontSize * obj.scaleX;

Above I set default FontSize to 15. then I modify object I can get proper Height, Width, Left, Top, but I am not able to get FontSize.

In backend i set image and text like below screenshot.

In frontend what i get like below screenshot.

Below style for image & text on frontend.

element.style {
    left: 64.37%;
    top: 14.54%;
    width: 28.25%;
    height: 14.37%;
    font-size: 63.58px;
    color: #E346FF;
    font-family: Times New Roman;
    position: absolute;
    max-width: 100%;
    z-index: 996;
    max-height: 100%;
}

element.style {
    left: 56.5%;
    top: 0.81%;
    width: 42.86%;
    height: 42.86%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 995;
    display: block;
    background-image: url(.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

When i add below code it working perfect but in backend object is getting blur.

this.canvas.setHeight(300);
this.canvas.setWidth(240);
this.canvas.backgroundColor = '#E8EEF1';
this.canvas.setDimensions({width: '480px', height: '600px'}, {cssOnly: true});

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

Below is my code.

var text = new fabric.Text(imgText, {
                left: 10,
                top: 5,
                fontSize: 15,
                fontFamily: 'Verdana',
                fill: 'white'
            });
            text.scaleToWidth(canvas.width * 0.5);
            text.setControlsVisibility(canvasConfig);
            canvas.add(text);
            canvas.renderAll();
var objects = canvas.getActiveObject();

            var obj = objects;
            if (!obj) {
                return;
            }
            //console.log(obj.get('fontSize') *= obj.scaleX); 
            var angle = obj.get('angle');

            var objWidth = obj.get('width') * obj.scaleX;
            var objWidthPercent = objWidth / canvas.width * 100;

            var objHeight = obj.get('height') * obj.scaleY;
            var objHeightPercent = objHeight / canvas.height * 100;

            var bound = obj.getBoundingRect();
            var objLeft = obj.get('left') / canvas.width * 100;
            var objTop = obj.get('top') / canvas.height * 100;

            var newfontsize = obj.fontSize * obj.scaleX;

Above I set default FontSize to 15. then I modify object I can get proper Height, Width, Left, Top, but I am not able to get FontSize.

In backend i set image and text like below screenshot.

In frontend what i get like below screenshot.

Below style for image & text on frontend.

element.style {
    left: 64.37%;
    top: 14.54%;
    width: 28.25%;
    height: 14.37%;
    font-size: 63.58px;
    color: #E346FF;
    font-family: Times New Roman;
    position: absolute;
    max-width: 100%;
    z-index: 996;
    max-height: 100%;
}

element.style {
    left: 56.5%;
    top: 0.81%;
    width: 42.86%;
    height: 42.86%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 995;
    display: block;
    background-image: url(http://10.16.16.101/LabelExtension/pub/media/labelimageuploader/images/image/o/r/orange_38.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

When i add below code it working perfect but in backend object is getting blur.

this.canvas.setHeight(300);
this.canvas.setWidth(240);
this.canvas.backgroundColor = '#E8EEF1';
this.canvas.setDimensions({width: '480px', height: '600px'}, {cssOnly: true});

• javascript
• jquery
• fabricjs

• Can you include the piece of code where you're modifying the object and trying to get the fontSize? – shkaper Commented Jan 17, 2019 at 14:50
• @shkaper check my updated question Heare i can get Height, width, left, top. but not able to find font size. – Chirag Patel Commented Jan 18, 2019 at 4:17
• I'm not sure what you're trying to do in that mented line. obj.get('fontSize') should indeed return a number. console.log(obj.get('fontSize') *= obj.scaleX) can't work and will raise an error. That line translates to this: console.log(15 = 15 * obj.scaleX). You can't assign a value to another primitive value. – shkaper Commented Jan 18, 2019 at 14:28
• Are you trying to get a "font size" of fabric.Text object such that when you set this value as a "font-size" of plain HTML text via CSS, it looks the same size? – shkaper Commented Feb 2, 2019 at 23:04
• i want to know what is the actual formula to get font size in fabric.js? – Chirag Patel Commented Feb 4, 2019 at 9:01

4 Answers 4

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

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

Step 1 - Prepare scene, pose 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;
}

getHeightOfLine(lineIndex) → {Number} : Computes height of character at given position and return fontSize of the character. Is it? tell me. It's a method of text class. http://fabricjs./docs/fabric.Text.html#getHeightOfLine

This is the vanilla js solution.

I am not able to get FontSize.

You can achieve fontSize using the putedStyle like

  let style = window.getComputedStyle(text, null).getPropertyValue('font-size');
  let fontSize = parseFloat(style); 

https://developer.mozilla/de/docs/Web/API/Window/getComputedStyle

In addition to this I remend you to work with vw and vh

.text {
  font-size: 10vw;
}

https://web-design-weekly./2014/11/18/viewport-units-vw-vh-vmin-vmax/

All together gives us https://jsfiddle/a8woL1eh/

The problem is Text object does not change its fontSize property when it is modified or transformed unless set fontSize property manually. It's the reason why you get blurred text because despite changed the transform size the main fontSize remaining same. So possible solution will be somehow changing fontSize property dynamically. http://jsfiddle/therowf/xkhwagd8/41/ Here I have attached a jsfiddle example form your code. This code is very similar to your one.

Thanks and let me know if this is worked. (:

var canvas = new fabric.Canvas(document.getElementById('c'));
var imgText ="This is text";
var canvasConfig = true;
var text = new fabric.Text(imgText, {
                left: 10,
                top: 5,
                fontSize: 50,
                fontFamily: 'Verdana',
                fill: 'black'
            });
            text.scaleToWidth(canvas.width * 0.5);
            text.setControlsVisibility(canvasConfig);
            canvas.add(text);
            canvas.renderAll();




var objects = canvas.getActiveObject();

function moveHandler(evt){
//evt.target.fontSize = 10;
var fontSizeX = evt.target.scaleX;
var fontSizeY = evt.target.scaleY;
if(fontSizeX === fontSizeY){
	evt.target.fontSize = fontSizeX*100;
  console.log(evt.target.fontSize);
}
}
canvas.on('object:scaling', moveHandler);

<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>



    <canvas id="c" width="400" height="400"></canvas>