Display objects in same position in different size canvas in fabric js

Question

I am creating a canvas using fabric JS with a dynamic size in admin panel and adding objects into it, after modifying the canvas I am storing the JSON data into the database (using: canvas.toJSON() ). Now i have displayed a canvas in the front-end for editing using that stored JSON data from the database ( canvas.loadFromJSON(canvasData, this.canvas.renderAll.bind(this.canvas)) ). If I use the same width and height of the canvas it is showing perfectly. But with different width and height of the canvas, the objects are not showing in the proper position sometimes objects getting chopped.

For example, I have created a canvas with 1200*1000px in the admin now I want to load the canvas data into an 800*500px canvas window with the objects in the same place. As if the original canvas is larger then I still have to fit the entire canvas data into the front-end so I need to load the canvas into a smaller canvas window.

I have followed Canvas client size in fabric js

var canvas = new fabric.Canvas('c', {width: 640, height: 360});
canvas.setDimensions({width: 1280, height: 720}, {backstoreOnly: true});

When using the above code if original template size is large 3000*2000px and fits it into a 600*600px window the text in the canvas showing very small to read but when generating an image from the canvas it shows properly. See the picture

See the picture How can I fix this? Thanks in advance

Answer 1

Here are some different ways to try.

Try this

const scaleWidth = originalWidth / currentScreenWidth;
const scaleHeight = originalHeight / currentScreenHeight;

canvas.loadFromJSON(JSON.parse(myCanvasData), 
canvas.renderAll.bind(canvas), (o, object) => {
    object.scale(yourScaleValue);
});

The object.scale method scales proportionally.

You could also try:

canvas.setWidth(originalWidth * canvas.getZoom());
canvas.setHeight(originalHeight * canvas.getZoom());

And...:

const scaleWidth = originalWidth / currentScreenWidth;
const scaleHeight = originalHeight / currentScreenHeight;

If scaleWidth or scaleHeight is less than 1, you will be increasing your canvas and object size.

if scaleWidth or scaleHeight is greater than 1, you will be decreasing your canvas and object sizes.

canvas.loadFromJSON(JSON.parse(myCanvasData), 
canvas.renderAll.bind(canvas), (o, object) => {
    if(scaleWidth > 1){
        object.width = object.width / scaleWidth;
    }else if (scaleWidth < 1){
        const scalePercentage = 1 - scaleWidth;
        object.width = (object.width * scalePercentage) + object.width;
    }else{
        //same size, no scaling necessary
    }
});

Lastly:

canvas.viewportTransform = [(currentScreenWidth / originalWidth), 0, 0, (currentScreenHeight / originalHeight), 0, 0];

Changing the viewport transform can have negative after effects. For example: If the scene you are loading has a created width and height of 1440 X 900 and the current resolution you are on is 1920 X 1080, It will load correctly with this code but the minute you go adding new items to the canvas it will be out of sync.