JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="id" style="border: 2px solid red;" width="500" height="150">

JavaScript

var canvas = new fabric.Canvas(id);
for (var i = 0; i < 4; i++){
	var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: i * 110,
    selectable: true,
    hasControls: false,
    borderColor: 'red',
    borderWidth: 2,
    lockMovementX: true,
    lockMovementY: true
  });

  canvas.add(rect);
}


fabric.util.loadImage('http://fabricjs.com/lib/pug.jpg', function(img) {
	canvas.forEachObject(function(obj){
  	obj.set('fill', new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  }));
  });
  
  canvas.renderAll();
});