I'm trying to set an image as a background for a canvas but the image won't load until until an object(rectangle) is clicked on the canvas.

Did someone has the same problem?

var canvas = new fabric.Canvas('image_canvas');
canvas.setWidth(window.innerWidth * factor);
canvas.setHeight(window.innerWidth / 2 * factor);
var canvasHeight = canvas.height;
var canvasWidth = canvas.width;

//Just a debug statement console.log(canvasWidth, canvasHeight);

var bgImg = new fabric.Image();
bgImg.setSrc('<?= $image_src ?>', function () {
   bgImg.set({
      top: 0,
      left: 0,
      scaleX: canvasWidth / bgImg.width,
      scaleY: canvasHeight / bgImg.height,
   });
});
canvas.setBackgroundImage(bgImg, canvas.renderAll.bind(canvas));
canvas.renderAll();