Fabric.js background appears only after change zoom value

Question

I'm trying to change canvas background with Pattern:

this.canvas.setBackgroundColor(new fabric.Pattern({source: url, repeat: 'repeat'}),
  ()=> {
    this.canvas.renderAll();
  });

I'm using an external url like this: https://cdn.pixabay.com/photo/2016/02/20/02/21/colorful-1211510_960_720.png

The canvas is created and working, but the background image doesn't appear unless I make zoom (in or out) to the canvas, as I do it background appears.

Why do you think that I'm having this problem? Am I doing anything wrong? How could I fix this behaviour?

Answer 1

I don't know the ins and outs of this but according to the docs for: backgroundImage :fabric.Image, the image needs to be bound to the canvas it is on. Maybe it is the same with setting patterns through the backgroundColor property.

backgroundImage :fabric.Image
Background image of canvas instance. since 2.4.0 image caching is active, please when putting an image as background, add to the canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom vale. As an alternative you can disable image objectCaching

Here's a working example: https://jsfiddle.net/sunny001/cb4eqjf1/44/

let canvas
let url = "https://cdn.pixabay.com/photo/2016/02/20/02/21/colorful-1211510_960_720.png"

canvas = new fabric.Canvas('canvas-tools');
canvas.setBackgroundColor({
 source: url,
 repeat: 'repeat'
 }, canvas.renderAll.bind(canvas));