On object scaling the width and height of rectangle dont change in fabric.js

Question

I'm working on fabric.js. On click of apply button I add a text and rectangle in a group which is shown correctly. But when I try to scale the group then the width and height is not changed. Here is the JS Fiddle.

Code:

function createCustomComments() {
  try {

    var selText = $('#txtCustomComments').val();
    var color = new fabric.Color(colorPicker.val()).toRgb();
    var fontSize = fontPicker.val();

    commentText = new fabric.IText(selText, {
      fontSize: fontSize,
      hasControls: false,
      hasBorders: true,
      originX: 'center',
      backgroundColor: 'rgba(0,0,0,0)',
      borderColor: color,
      //opacity: 0.6,
      fill: color,
      fontFamily: "helvetica"
    });

    var commentRectange = new fabric.Rect({
      originX: 'center',
      top: 30,
      width: 300,
      height: 200,
      fill: 'rgba(0,0,0,0)',
      stroke: color,
      strokeWidth: 4
    });

    var group = new fabric.Group([commentText, commentRectange], {
      left: 100,
      top: 100
    });

    canvas.add(group);
    canvas.bringForward(group);

  } catch (exception) {
    console.log(exception);
  }
}

Answer 1

I've started executing your fiddle and

1. adding a text to the canvas.

First exported JSON

    {
      "objects": [
        {
      "type": "image",
      "width": 1050,
      "height": 829,
      "crossOrigin": "Anonymous",
      "src": "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg",
      "filters": [

      ],
      "resizeFilters": [

      ]
    },
    {
      "type": "group",
      "left": 100,
      "top": 100,
      "width": 304,
      "height": 234,
      "objects": [
        {
          "type": "i-text",
          "originX": "center",
          "originY": "top",
          "left": 0,
          "top": -117,
          "width": 103.36,
          "height": 22.6,
          "fill": "rgb(255,0,0)",
          "stroke": null,
          "strokeWidth": 1,
          "strokeDashArray": null,
          "strokeLineCap": "butt",
          "strokeLineJoin": "miter",
          "strokeMiterLimit": 10,
          "scaleX": 1,
          "scaleY": 1,
          "angle": 0,
          "flipX": false,
          "flipY": false,
          "opacity": 1,
          "shadow": null,
          "visible": true,
          "clipTo": null,
          "backgroundColor": "rgba(0,0,0,0)",
          "fillRule": "nonzero",
          "globalCompositeOperation": "source-over",
          "transformMatrix": null,
          "skewX": 0,
          "skewY": 0,
          "text": "dummy text",
          "fontSize": "20",
          "fontWeight": "normal",
          "fontFamily": "helvetica",
          "fontStyle": "",
          "lineHeight": 1.16,
          "textDecoration": "",
          "textAlign": "left",
          "textBackgroundColor": "",
          "charSpacing": 0,
          "styles": {

          }
        },
        {
          "type": "rect",
          "originX": "center",
          "originY": "top",
          "left": 0,
          "top": -87,
          "width": 300,
          "height": 200,
          "fill": "rgba(0,0,0,0)",
          "stroke": "rgb(255,0,0)",
          "strokeWidth": 4,
          "strokeDashArray": null,
          "strokeLineCap": "butt",
          "strokeLineJoin": "miter",
          "strokeMiterLimit": 10,
          "scaleX": 1,
          "scaleY": 1,
          "angle": 0,
          "flipX": false,
          "flipY": false,
          "opacity": 1,
          "shadow": null,
          "visible": true,
          "clipTo": null,
          "backgroundColor": "",
          "fillRule": "nonzero",
          "globalCompositeOperation": "source-over",
          "transformMatrix": null,
          "skewX": 0,
          "skewY": 0,
          "rx": 0,
          "ry": 0
        }
      ]
    }
  ],
  "background": ""
}

2. resized the group around the text

Second exported JSON

{
  "objects": [
    {
      "type": "image",
      "width": 1050,
      "height": 829,
      "crossOrigin": "Anonymous",
      "src": "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg",
      "filters": [

      ],
      "resizeFilters": [

      ]
    },
    {
      "type": "group",
      "left": 100,
      "top": 100,
      "width": 304,
      "height": 234,
      "scaleX": 1.55,
      "scaleY": 1.55,
      "objects": [
        {
          "type": "i-text",
          "originX": "center",
          "originY": "top",
          "left": 0,
          "top": -117,
          "width": 103.36,
          "height": 22.6,
          "fill": "rgb(255,0,0)",
          "stroke": null,
          "strokeWidth": 1,
          "strokeDashArray": null,
          "strokeLineCap": "butt",
          "strokeLineJoin": "miter",
          "strokeMiterLimit": 10,
          "scaleX": 1,
          "scaleY": 1,
          "angle": 0,
          "flipX": false,
          "flipY": false,
          "opacity": 1,
          "shadow": null,
          "visible": true,
          "clipTo": null,
          "backgroundColor": "rgba(0,0,0,0)",
          "fillRule": "nonzero",
          "globalCompositeOperation": "source-over",
          "transformMatrix": null,
          "skewX": 0,
          "skewY": 0,
          "text": "dummy text",
          "fontSize": "20",
          "fontWeight": "normal",
          "fontFamily": "helvetica",
          "fontStyle": "",
          "lineHeight": 1.16,
          "textDecoration": "",
          "textAlign": "left",
          "textBackgroundColor": "",
          "charSpacing": 0,
          "styles": {

          }
        },
        {
          "type": "rect",
          "originX": "center",
          "originY": "top",
          "left": 0,
          "top": -87,
          "width": 300,
          "height": 200,
          "fill": "rgba(0,0,0,0)",
          "stroke": "rgb(255,0,0)",
          "strokeWidth": 4,
          "strokeDashArray": null,
          "strokeLineCap": "butt",
          "strokeLineJoin": "miter",
          "strokeMiterLimit": 10,
          "scaleX": 1,
          "scaleY": 1,
          "angle": 0,
          "flipX": false,
          "flipY": false,
          "opacity": 1,
          "shadow": null,
          "visible": true,
          "clipTo": null,
          "backgroundColor": "",
          "fillRule": "nonzero",
          "globalCompositeOperation": "source-over",
          "transformMatrix": null,
          "skewX": 0,
          "skewY": 0,
          "rx": 0,
          "ry": 0
        }
      ]
    }
  ],
  "background": ""
}

As @john-m commented above

Just multiply the width by ScaleX and the height by ScaleY

Because as you can see below, the width and the height doesn't change, but now there are two updated properties: scaleX and scaleY.

let newWidth = width * scaleX;
let newHeight = height * scaleY;