JSFiddle - React, Tailwind, and code Playground

by SooChangLee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.4/fabric.js"></script>
fabric rendering
<canvas id="canvas" width="200" height="200" style="border:0px;"></canvas>
<p>
screenshot of result chrome (non retina) - as expected<br>
<img src="http://cdn.stijlbreuk.nu/tmp/chrome.png"/>
</p>
<p>
screenshot of result chrome (retina) - pattern is too large (twice)<br>
<img width="200" height="200" src="http://cdn.stijlbreuk.nu/tmp/safari-retina.png"/>
</p>
<p>
screenshot of result safari (none retina) - has small gap between pattern<br>
<img width="200" height="200" src="http://cdn.stijlbreuk.nu/tmp/safari.png"/>
</p>

JavaScript

var canvas = new fabric.Canvas('canvas', { enableRetinaScaling: false });
function getPatternCanvas() {
       
    const patternSourceCanvas = new fabric.StaticCanvas(null, { enableRetinaScaling: false });
    patternSourceCanvas.renderAll();
    const pattern = new fabric.Pattern({
        source() {
            patternSourceCanvas.setDimensions({
                width: 100,
                height: 100,
            });
            patternSourceCanvas.renderAll();
            return patternSourceCanvas.getElement();
        },
        repeat: 'repeat',
    });
    return {
        canvas: patternSourceCanvas,
        pattern,
    };
}
   
var patternObj = getPatternCanvas();


var area = new fabric.Rect({
  width: 200,
  height: 200,
  selectable: false,
});

canvas.add(area);

fabric.loadSVGFromURL('https://s3.ap-northeast-2.amazonaws.com/js-fiddle/1558429751231_2710_29.svg', (objects, opts) => {
      console.log('load SVG from URL', objects, opts);
      var img = fabric.util.groupSVGElements(objects);
      img.set({
          strokeWidth: 0,
          fill: '#00ff00'
      });
      patternObj.canvas.add(img);
      patternObj.canvas.renderAll();
      area.set({
          fill: patternObj.pattern,
          objectCaching: false,
       });
       patternObj.canvas.renderAll();
			canvas.renderAll()
  });

canvas.renderAll();