JSFiddle - React, Tailwind, and code Playground

by codert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>

JavaScript

const patternColor = [0, 1, 1, 0];
const patternObjects = patternColor.map((val, idx) => {
    return new fabric.Rect({
        fill: val ? '#CCCCCC' : '#FFFFFF',
        top: (idx > 1 ? 0 : 1) * 16,
        left: (idx % 2) * 16,
        height: 16,
        width: 16,
        strokeWidth: 0,
        hasBorder: false
    });
});
const patternGroup = new fabric.Group(patternObjects);
const patternSourceCanvas = new fabric.StaticCanvas();

patternSourceCanvas.add(patternGroup);
patternSourceCanvas.renderAll();
patternSourceCanvas.setDimensions({
	width: patternGroup.getScaledWidth(),
  height: patternGroup.getScaledHeight()
})

const canvas2 = new fabric.Canvas();
const canvasEl = patternSourceCanvas.getElement();

document.body.appendChild(canvasEl);
console.log(canvasEl.toDataURL());

fabric.util.loadImage(canvasEl.toDataURL(), (img) => {
	document.body.appendChild(img);
  const pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  });
  const rect = new fabric.Rect({
      fill: pattern,
      height: 100,
      width: 100
  })
  canvas2.add(rect);
});

document.body.appendChild(canvas2.getElement());