0

I want to set the height and width of canvas according to the background image.

For example, if the height and width of the image are less than screen size then canvas size is 100% of the screen and if image size is greater than screen size then canvas adjusts according to it without cutting image and show scrollbars.

Currently, I have fix the height and width of the canvas 

 <canvas id="canvas" width="720" height="800"></canvas>

and background image code is 

 canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas), {      
    });

How to make canvas height and width dynamic?

Amar
  • 33
  • 5
  • Does this answer your question? [make canvas as wide and as high as parent](https://stackoverflow.com/questions/10214873/make-canvas-as-wide-and-as-high-as-parent) – Smokey Dawson Dec 05 '19 at 00:46
  • I want to set canvas according to background image not parent – Amar Dec 05 '19 at 00:57

1 Answers1

0

I have set dynamic canvas size using 

    var image = new Image()
    image.src = './img/form.jpg';
    image.onload = function () {
        var canv = $('#canvas');
        canv.attr('width', image.width);
        canv.attr('height', image.height);
        canvas.dispose();
        setTimeout(() => {
            canvas = new fabric.Canvas('canvas');
            canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas), {});
        }, 500);

    };
Amar
  • 33
  • 5