Calculate % position of the group in fabric js

Question

I am stuck in a problem, don't know if this is related to the current thread.

I have created a rectangle inside the canvas like this:

The grey part is the canvas there is a small rectangle inside. This is the code I have written:

// THIS METHOD WHEN THE COMPONENT IS INITIALIZED
// THAT IS VERY FIRST TIME
// htmlCanvas = Canvas from HTML file
initCanvas(htmlCanvas) {
    this.mockupDrawableAreaCanvasSize = size;
    this.mainCanvasDivRef = htmlCanvas;
    fabric.textureSize = 4096;
    fabric.charWidthsCache = {};
    fabric.Object.prototype.borderScaleFactor = 2;
    fabric.Object.prototype.objectCaching = false;
    fabric.Object.prototype.noScaleCache = true;
    fabric.Object.prototype.lockScalingFlip = true;
    fabric.Object.prototype.hasRotatingPoint = true;
    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.cornerColor = "rgb(255,255,255)";
    fabric.Object.prototype.cornerSize = 8;
    fabric.Object.prototype.cornerStrokeColor = "#48B774";
    fabric.Object.prototype.borderColor = "#48B774";
    fabric.Object.prototype.fill = "#FFFFFF";
    fabric.Object.prototype.cornerStyle = "rect";
    fabric.Object.prototype.borderOpacityWhenMoving = .5;
    fabric.Object.prototype.snapAngle = 90;
    fabric.Object.prototype.snapThreshold = 5;
    fabric.Object.prototype.charWidthsCache = {};

    this.canvas = new fabric.Canvas(htmlCanvas.nativeElement, this.defaultOption);

    this.canvas.backgroundColor = '#e8e8e8';
    this.canvas.uniScaleTransform = true;

    this.canvas.requestRenderAll()

    // -------
    const {
        width,
        height
    } = this.getDimensions();
    this.drawingBoard = new fabric.Rect({
        excludeFromExport: false,
        hasControls: false,
        height,
        selectable: false,
        borderColor: "transparent",
        strokeWidth: 0,
        stroke: 'transparent',
        fill: '#ffffff',
        width,
        preserveObjectStacking: false,
        absolutePositioned: true,
        clip_id: 'io_main_canvas',
        originX: 'center',
        originY: 'center',
        lockUniScaling: true,
    });
}
// Here mockupDrawableAreaCanvasSize = {width: 1080, height: 1080}
getDimensions() {
    let containerWidth: any = parseInt(this.mockupDrawableAreaCanvasSize.width, 10);
    let containerHeight: any = parseInt(this.mockupDrawableAreaCanvasSize.height, 10);
    const footer: any = document.querySelector('.footer-toolbar');
    const container = document.querySelector('.upper-canvas');
    const lowerCanvasEl = container && window.getComputedStyle(container, null);
    let canvasHeight = parseInt(lowerCanvasEl.height, 10) - 1.5 * parseInt(footer.offsetHeight, 10);
    const canvasWidth = parseInt(lowerCanvasEl.width, 10);

    // Complete fit
    if (containerWidth <= canvasWidth && containerHeight <= canvasHeight) {
        return {
            width: containerWidth,
            height: containerHeight
        }
    }
    if (canvasWidth < containerWidth) {
        containerWidth = canvasWidth - 80;
        canvasHeight = (containerWidth / (containerWidth / containerHeight)) - 6 * parseInt(footer.offsetHeight, 10)
    }
    let width = (containerWidth / containerHeight) * canvasHeight;

    return {
        width,
        height: canvasHeight
    }
}

This code works well in every use case. I want to position the objects at the same place where they were initially in the bigger or smaller screens.

My approach was:

Group everything, Add the group to canvas, calculate the percentage, scale and finally ungroup

But the objects are very small as shown in the below picture

How should I scale the object so that the whole content is a perfect fit in the group?

Group everything -> done

calculate % position of the group -> done

scale the group by ratio -> how?

-->>> The ratio between which values- group and canvas or group and drawing board?

apply for the same % position -->done

Ungroup --> done

Answer 1

I found many issues with the approach I was trying to implement. Now instead od repositionin, grouping, etc.I am zooming the canvas