Clever Geek Handbook

Need to stretch background image to cover whole canvas in fabricjs

I can load the background image. but I am not shying away from how to stretch the whole canvas. sample code

var fr = new FileReader;
fr.onload = function() {
    var image = new Image();
    image.onload = function() {
        var imgwidth = this.width;
        currentcanvas.setBackgroundImage(fr.result, currentcanvas.renderAll.bind(currentcanvas), {

          scaleX: currentcanvas.width / imgwidth,
            scaleY: currentcanvas.height / imgwidth
        });
        currentcanvas.renderAll();
    };
+3


source to share


2 answers


You can specify the height and width of the background image based on the height and width of the canvas, as shown below:



canvas.backgroundImage.width = canvas.getWidth();
canvas.backgroundImage.height = canvas.getHeight();
+1


source


Set height and width supports to canvas height and width.



canvas.setBackgroundImage(imgObj, canvas.renderAll.bind(canvas), {
   width: canvas.width,
   height: canvas.height,
   originX: 'left',
   originY: 'top'
});
0


source






More articles:


All Articles