Masking an image to the canvas

by InferOn

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<img class='image floatLeft' src='http://i.imgur.com/CeCVZOX.png' width='300' height='400'>
<div class='placeholder floatLeft'>
  <canvas id='c' width='300' height='300'></canvas>
  <div>

CSS

.floatLeft {
  display: inline-block;
  border: 2px solid #ccc;
}
.placeholder {
  margin-left: 10px;
}

JavaScript

(function(global) {

          'use strict';

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

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

            type: 'GradientEffect',

            initialize: function (options) {
              options = options || {};
              this.gradient = options.gradient || {};
              this.img = options.img;
            },

            applyTo: function(canvasEl) {
              var gr = this.gradient;
              var w = this.img._element.naturalWidth;
              var h = this.img._element.naturalHeight;
              var hc = document.createElement('canvas');

              hc.setAttribute('width', w);
              hc.setAttribute('height', h);

              var fhc = new fabric.Canvas(hc);
              var rect = new fabric.Rect({
                fill: 'transparent',
                width: w,
                height: h
              });

              rect.setGradient('fill', gr);

              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),
                data = imageData.data;

              for (var i = 0, n = data.length; i < n; i += 4) {
                if(data[i] != 0 && data[i+1] != 0 && data[i+2] != 0) {
                  data[i] += fhcData[i];
                  data[i + 1] += fhcData[i + 1];
                  data[i + 2] += fhcData[i + 2];

                }
              }

              context.putImageData(imageData, 0, 0);
            },

            toObject: function() {
              return extend(this.callSuper('toObject'), {
               ...