JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="../js/fabric.js"></script>
<button style="background-image: url('https://mdn.mozillademos.org/files/222/Canvas_createpattern.png');" class="pat">pattern1</button>
<button style="background-image: url('http://s27.postimg.org/n8lls969f/pt2.jpg');" class="pat">pattern2</button>
<button style="background-image: url('http://s27.postimg.org/gd1d95bsj/pt4_copy.jpg');" class="pat">pattern3</button>


<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

JavaScript

canvas = new fabric.Canvas('canvas');
s = '<svg width="150" height="150"><rect rx="20" ry="20" width="150" height="150" style="fill:#bbb;" /></svg>';
fabric.loadSVGFromString(s, function(objects, options) {
  shape = fabric.util.groupSVGElements(objects, options);
  shape.set({
                    left: 200,
                    top: 200,
                    //scaleY: 2,
                    //scaleX: 2,
                    //fill: '#000',
                    centeredScaling: true
                });
  canvas.add(shape).renderAll();
});

$('.pat').click(function(){
  var src = $(this).css('background-image');
  console.log(src);
  var src = src.replace('url(', '').replace(')', '');
  console.log(src);
   fabric.util.loadImage(src, function(img) {
    pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  });
      if (shape instanceof fabric.PathGroup) {
        shape.getObjects().forEach(function(o) { o.fill = pattern; });
      }
      else {
       shape.fill = pattern;
      }
     canvas.renderAll();
   });
  
});