javascript - Can I apply two shaded color on single image with image filter in fabricjs? -

i have 2 shaded colors this:

i want apply gradient colors on single image fabric js image filter.

basically added 2 palettes colors. need when change color palettes both colors apply in single image above image. possible?

i designing t-shirt below:

i want apply 2 colors on big grey image of t-shirt. different color images working separate image , separate object in fabric js , want apply colors on single grey image part.

is there way make work?

since fabricjs doesn't give natively possibility of apply gradient image, can achieve task imagefilter included in following code snippet.

(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;              (var = 0, n = data.length; < n; += 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 fabric.image.filters.gradienteffect(object);        };        })(typeof exports !== 'undefined' ? exports : this);      var canvas = new fabric.canvas('c');    fabric.image.fromurl('http://i.imgur.com/bkmw5mx.png', function(img) {    var gr = {      x1: 0,      y1: 0,      x2: 0,      y2: img.height,      colorstops: {        0: "red",        1: "blue",      }    };    img.filters.push(new fabric.image.filters.gradienteffect({      gradient: gr,      img: img,          }));    img.applyfilters(canvas.renderall.bind(canvas));    canvas.add(img.set({      width: 150,      height: 150,      }));  }, {    crossorigin: ''  });

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

<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/bkmw5mx.png' width='200' height='200'>  <div class='placeholder floatleft'>    <canvas id='c' width='300' height='300'></canvas>    <div>

---

the work done applyto function, create new canvas on fly , put rectangle filled argument gradient on it, then, pixel pixel, apply relative color picked gradient. the problem image couldn't resized on fly, because imagedata of image , imagedata of gradient should of same lenght:

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;            (var = 0, n = data.length; < n; += 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);         }