JSFiddle - React, Tailwind, and code Playground

by irina_dfy

HTML

<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

<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>

JavaScript

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
 
  function loadPattern(url) {
    var obj = canvas.getActiveObject();  
    if (!obj) return;
    fabric.util.loadImage(url, function(img) {
      var pattern =  new fabric.Pattern({
        source: img,
        repeat: document.getElementById('repeat').value
      });  
      obj.getObjects().forEach(function(o) { o.fill = pattern; });
      canvas.renderAll();
    });
  }

  
        //new svg
        var group = [], loadedObjectsSvg;
        fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg",function(objects,options) {
            loadedObjectsSvg = new fabric.Group(group);
            loadedObjectsSvg.set({
                    left: 100,
                    top: 100,
                    width:175,
                    height:175
            });
           // loadedObjectsSvg.getObjects().forEach(function(o) { o.fill = pattern; });
            canvas.add(loadedObjectsSvg);
            canvas.renderAll();

        },function(item, object) {
                object.set('id',item.getAttribute('id'));
                group.push(object);
        });
    //end svg
    
 //loadPattern('http://fabricjs.com/assets/honey_im_subtle.png');

  document.getElementById('patterns').onchange = function() {
    loadPattern('http://fabricjs.com/assets/' + this.value);
  };
  document.getElementById('repeat').onchange = function() {
    text.fill.repeat = this.value;
    canvas.renderAll();
  };
})();