How to enable responsive design for Fabric.js

Question

Is there a way to make a Fabric.js canvas resize with the browser to enable the same result on any device? I'm talking about responsive design.

Has anyone a code example?

Answer 1

This jsFiddle is a working solution. It is inspired by this github issue.

These are the required things:

A div that surrounds the canvas that is controlled by fabric.

<div class="fabric-canvas-wrapper">
    <canvas id="theCanvas"></canvas>
</div>

And a window resize handler that triggers the calculation and setting of the new canvas dimension and the zoom.

window.onresize = resizeCanvas() {
    const outerCanvasContainer = document.getElementById('fabric-canvas-wrapper');

    const ratio          = canvas.getWidth() / canvas.getHeight();
    const containerWidth = outerCanvasContainer.clientWidth;
    const scale          = containerWidth / canvas.getWidth();
    const zoom           = canvas.getZoom() * scale;

    canvas.setDimensions({width: containerWidth, height: containerWidth / ratio});
    canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
}

That's all. It seems to work perfectly. Please let me know if any issues come up with this solution.

I have used fabric.js in version 3.6.2.

Answer 2

Basically you need to get the device screen's width and height. Afterwards just resize the canvas accordingly in your Javascript. Example:

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;

You might have screens with varying resolution ratios though, what I usually do in this case is calculate your original width's and the device's width ratio and then adjust both width and height accordingly with that value. Example:

var originalWidth = 960;  //Example value
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var widthRatio = originalWidth / width;
canvas.width *= widthRatio;
canvas.height *= widthRatio;

This usually works fine for me on any device, hope this helps.