Search code examples
fabricjscolor-pickerlinear-gradients

Using fabric.js, how can I use color from color picker in gradient colorstops in my code

I am trying to use color from color picker in my code 

rec.setGradient('fill', {
          type: 'linear',
          x1: -rec.width / 2,
          y1: 0,
          x2: rec.width / 2,
          y2: 0,
          colorStops: {0 : '"'+$("#gradColor1").val()+'"' ,1 : '"'+$("#gradColor2").val()+'"'} ,
        });

But above code is not working and showing error in console.log as

TypeError: source is undefined
 return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')';

jsfiddle link is http://jsfiddle.net/37hgdjda/11/

Solution

  • Oh, I am doing silly mistake.

    corrected this line 

    colorStops: {0 : '"'+$("#gradColor1").val()+'"' ,1 : '"'+$("#gradColor2").val()+'"'} ,

    to

    colorStops: {0 : $("#gradColor1").val() + ' ,1 : '+$("#gradColor2").val()} ,

    Corrected jsfiddle here http://jsfiddle.net/37hgdjda/13/