How to set repeating background image for a canvas in Fabric JS?

Question

I would like to set an image as the background image for the canvas.

It is possible with the canvas.setBackgroundImage method.

But it is not repeating throughout the background.

How to make it repeatable?

I have seen demos where pattern is used to set repeating background image for text and shapes.

How to use this pattern for canvas background.?

Answer 1

According to the tests, bundled with the Fabric.JS, it is possible via backgroundColor setter even without passing fabric.Pattern

var src = 'img/checker.png';

canvas.setBackgroundColor({source: src, repeat: 'repeat'}, function () {
  canvas.renderAll();
});

Answer 2

Use canvas.backgroundColor and pattern instead of background image:

canvas.backgroundColor = new fabric.Pattern({source: image})