JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>

JavaScript

(function (global) {

       'use strict';

       var fabric = global.fabric || (global.fabric = {}),
           extend = fabric.util.object.extend;

       fabric.Image.filters.ImagePatternEffect = fabric.util.createClass(fabric.Image.filters.BaseFilter, {

           type: 'ImagePatternEffect',

           initialize: function (options) {
               options = options || {};

               this.img = options.img;
           },

           applyTo: function (canvasEl) {

               var w = canvasEl.width;
               var h = canvasEl.height;
               var hc = document.createElement('canvas');

               fabric.Image.fromURL('http://i.imgur.com/0Ks0mlY.png', function (smile) {
                   debugger;
                   hc.setAttribute('width', w);
                   hc.setAttribute('height', h);

                   var fhc = new fabric.StaticCanvas(hc);
                   fhc.add(smile);
                   var pattern = new fabric.Pattern({
                       source: function () {
                           fhc.setDimensions({
                               width: smile.getWidth() + 5,
                               height: smile.getHeight() + 5,
                           });
                           return fhc.getElement();
                       },
                       repeat: 'repeat'
                   });
                   var rect = new fabric.Rect({
                       fill: pattern,
                       width: w,
                       height: h
                   });

                   fhc.add(rect);
                   fhc.renderAll();

                   var ifhcContext = fhc.getContext('2d');
                   var fhcImageData = ifhcContext.getImageData(0, 0, fhc.width, fhc.height);
                   var fhcData = fhcImageData.data;

                   var context = canvasEl.getContext('2d'),
                       imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
                    ...