JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="kitchensink">
  <head>
    <meta charset="utf-8">

    <title>Dynamic patterns | Fabric.js Demos</title>
    
    <link rel="stylesheet" href="../css/master.css">
    <link rel="stylesheet" href="../css/ads.css">
    <link rel="stylesheet" href="../css/prism.css">
    <style>
      pre { margin-left: 15px !important }
    </style>
    <script src="../lib/prism.js"></script>
    
    <script src="../js/master.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  </head>
  <body>
    <ul id="header">
  <li><a href="http://fabricjs.com/">Home</a></li>
  <li><a href="http://fabricjs.com/demos">Demos</a></li>
  <li><a href="http://fabricjs.com/articles">Tutorial</a></li>
  <li><a href="http://fabricjs.com/docs">Docs</a></li>
  <li><a href="http://fabricjs.com/build">Custom Build</a></li>
  <li><a href="http://fabricjs.com/help">Support</a></li>
  <li><a href="http://fabricjs.com/test">Tests/Benchmarks</a></li>
  <li><a href="http://fabricjs.com/team">Team</a></li>
  <li class="github secondary">
    <!-- Place this tag where you want the button to render. -->
    <a class="github-button" href="https://github.com/fabricjs/fabric.js" data-size="large" data-show-count="true" aria-label="Star fabricjs/fabric.js on GitHub">Star</a>
  </li>
  <li class="twitter secondary">
    <a href="https://twitter.com/fabricjs" class="twitter-follow-button" data-show-count="true">Follow @fabricjs</a>
  </li>
  <li id="carbonads-container">
    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIEK7E&placement=fabricjscom" id="_carbonads_js"></script>
  </li>
</ul>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>

</script>


    <div id="bd-wrapper" ng-controller="CanvasControls">
      <h2><span>Fabric.js demos</span> &middot; Dynamic...

JavaScript

(function() {

  if (document.location.hostname === 'localhost') {
    var links = document.getElementById('header').getElementsByTagName('a');
    for (var i = 0, len = links.length; i < len; i++) {
      // very retarted fix but fuck it
      links[i].href = links[i].href.replace('fabricjs.com', 'localhost:4000');
    }
  }
  else {
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  }
})();
(function() {
  fabric.util.addListener(fabric.window, 'load', function() {
    setTimeout(function() {
      var ads = document.getElementById('carbonads');
      var ads2 = document.getElementById('carbonads-container');
      var style = window.getComputedStyle(ads2);
      if (!ads || style.display === 'none') {
        var nag = document.getElementById('nag');
        if (!nag) {
          var newDiv = document.createElement('div');
          newDiv.id = 'gentle-reminder';
          newDiv.className = 'reminder';
          newDiv.innerHTML = 'Do you like fabricJS?<br />If you want it continue running and you do not mind tech related ads, please allow this website in your adblocker.<br /><br />❤️ Thank You!';
          document.body.appendChild(newDiv)
        }
      }
    }, 4000);
  });
})();

var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;

  var padding = 0;

  fabric.Image.fromURL('../assets/pug.jpg', function(img) {

    img.scaleToWidth(100);
    var patternSourceCanvas = new fabric.StaticCanvas();
    patternSourceCanvas.add(img);
    patternSourceCanvas.renderAll();
    var pattern = new fabric.Pattern({
      source: function() {
        patternSourceCanvas.setDimensions({
          width: img.getScaledWidth() + padding,
          height: img.getScaledHeight() + padding
        });
       ...