JSFiddle - React, Tailwind, and code Playground

by irina_dfy

HTML

<img src="http://fabricjs.com/assets/1.svg" height="80" id="svg2"  />
<div style="display: inline-block">
    <p>Pattern:
        <select id="patterns" >
            <option>honey_im_subtle.png</option>
            <option>nasty_fabric.png</option>
            <option>retina_wood.png</option>
            <option>greyfloral.png</option>
            <option>escheresque.png</option>
            <option>escheresque_ste.png</option>
            <option>bedge_grunge.png</option>
            <option>ladybug.png</option>
            <option>dragon2.jpg</option>
            <option>pug.jpg</option>
        </select>
    </p>
    <p>Repeat:
        <select id="repeat">
            <option>repeat</option>
            <option>repeat-x</option>
            <option>repeat-y</option>
            <option>no-repeat</option>
        </select>
    </p>
</div>
<br>
<canvas id="c" width="400" height="400"></canvas>

CSS

canvas {
    border-width: 1pz;
    border-style: solid;
    border-color: #000;
}

JavaScript

//initializing canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";
fabric.Object.prototype.transparentCorners = false;//? delete

//load svg
var imageSrc = "http://fabricjs.com/assets/1.svg";
     var group = [];
     fabric.loadSVGFromURL(imageSrc, function (objects, options) {
         var loadedObjects = new fabric.Group(group);
         loadedObjects.set({
             left: 100,
             top: 100,
             width: 175,
             height: 175

         });

         canvas.add(loadedObjects);
         canvas.renderAll();
     }, function (item, object) {
         object.set('id', item.getAttribute('id'));
         group.push(object);
     });
canvas.renderAll();


fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function (img) {
    group.setPatternFill({
        source: img,
        repeat: 'repeat'
    });
    canvas.renderAll();
});

//Patternify the svg

     var obj = canvas.getActiveObject();
     var patternUrl = 'http://fabricjs.com/assets/' + document.getElementById('patterns').value;
     var repeat = document.getElementById('repeat').value;

fabric.util.addListener(document.getElementById('patterns'), 'onchange', function () {
  //  var obj = canvas.item(0);

    if (!obj.fill instanceof fabric.Pattern) return;
    
    obj.fill.repeat = obj.fill.repeat === 'repeat' 
        ? 'repeat-x'
        : obj.fill.repeat === 'repeat-x'
            ? 'repeat-y'
            : obj.fill.repeat === 'repeat-y'
                ? 'no-repeat'
                : 'repeat';

    canvas.renderAll();
});
     fabric.util.loadImage(patternUrl, function (img) {
         var pattern = new fabric.Pattern({
             source: patternUrl,
             repeat: repeat
         });
         if (obj instanceof fabric.PathGroup) {
             obj.getObjects().forEach(function (o) {
                 o.fill = pattern;
             });
         } else {
             obj.fill.repeat = pattern;
         }

        ...