I’m using Fabric.js 5.3.1 in a website where users can upload a photo and mark them up. Everything seems to be working however when I set the uploaded image to the background of the canvas and scale it to fit the screen, then save that image, the image is the same size as its scaled dimensions. Meaning if I upload a 1920×1080 image, set it to the canvas’ background image, then scale the canvas down to screen size (say 600×337.5) then save the image using canvas.toDataUrl() my saved image is 600×337.5.

This is how I set the canvas’ background image:

setCanvasBackground: function (imgUrl) {
    let bgImg = new Image();
    bgImg.onload = function () {
        origBgWidth = bgImg.width; // global variable
        origBgHeight = bgImg.height; // global variable

        canvas.setDimensions({
            width: bgImg.width,
            height: bgImg.height
        });

        canvas.setBackgroundImage(imgUrl, function () {
            canvas.requestRenderAll();
            canvas.clearContext(canvas.contextTop);
            canvas.setZoom(1);

            undo_history.push(JSON.stringify(canvas)); // global variable
        });
    }

    bgImg.src = imgUrl;
}

Then I scale the canvas to screen dimensions like so:

resizeCanvas: function (areaWidth, areaHeight) {

    let canvasWidth = canvas.getWidth();
    let canvasHeight = canvas.getHeight();

    const wRatio = areaWidth / canvasWidth;
    const hRatio = areaHeight / canvasHeight;
    const scale = Math.min(wRatio, hRatio);

    const newWidth = canvasWidth * scale;
    const newHeight = canvasHeight * scale;
    const zoom = canvas.getZoom() * scale;

    canvas.setDimensions({ width: newWidth, height: newHeight });
    canvas.setZoom(zoom);
    canvas.requestRenderAll();
}

Finally, I save the image by converting it to a blob and uploading:

getImageBlobFromCanvas: function () {
    // I have to set the original dimensions and zoom level for it to save full size
    canvas.setDimensions({
        width: origBgWidth,
        height: origBgHeight
    });
    canvas.setZoom(1);

    let imageData = canvas.toDataURL({ format: "png" });
    return convertBase64ToBlob(imageData);
}

Is there a way to more efficiently scale and save the canvas image without having to store the original dimensions and reset them back before calling canvas.toDataUrl()? I want to scale the canvas for a responsive design but when uploading the image, it needs to be its original size. Using canvas.setDimensions() and canvas.setZoom() just before saving seems hacky.