Masking an image to the canvas

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='400' height='400'></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'), {
            gradient: this.gradient

          });
        }
      });

      fabric.Image.filters.GradientEffect.fromObject = function(object) {
        return new...