Text editor Canvas Fabric JS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
    <label for="color-image" style="display:inline-block">Fill Color Image</label>
    
<input type="color" value="" id="image-color" size="10">
<br>


    <canvas id="c"></canvas>

CSS

#c{
     border:1px solid red;
     top:22px;
     left:0px;
     height: 100%;
     width: 99%;
 }

JavaScript

var canvas = new fabric.Canvas("c");

 fabric.Image.filters.Luminosity = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Luminosity.prototype */ {

    /**
     * Filter type
     * @param {String} type
     * @default
     */
    type: 'Luminosity',

    /**
     * Applies filter to canvas element
     * @memberOf fabric.Image.filters.Grayscale.prototype
     * @param {Object} canvasEl Canvas element to apply filter to
     */
    applyTo: function(canvasEl) {
      var context = canvasEl.getContext('2d'),
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
          data = imageData.data,
          len = imageData.width * imageData.height * 4,
          index = 0,
          average;

      while (index < len) {
        //Luminosity = 0.21 × R + 0.72 × G + 0.07 × B
        average = (0.21 * data[index] + 0.72 * data[index + 1] + 0.07 * data[index + 2]);
        data[index]     = average;
        data[index + 1] = average;
        data[index + 2] = average;
        index += 4;
      }

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

  /**
   * Returns filter instance from an object representation
   * @static
   * @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale
   */
  fabric.Image.filters.Grayscale.fromObject = function() {
    return new fabric.Image.filters.Grayscale();
  };


fabric.Image.fromURL("http://fabricjs.com/lib/pug.jpg", function(img) {
  img.filters.push(new fabric.Image.filters.Grayscale());
  img.filters.push(new fabric.Image.filters.Multiply({color: 'blue'}));
  img.scale(0.3);
  img.applyFilters(function() {
    canvas.add(img);
  });
}, {crossOrigin: 'Anonymous'});




fabric.Image.fromURL("http://fabricjs.com/assets/pug.jpg", function(img) {
  img.filters.push(new fabric.Image.filters.Luminosity());
  img.filters.push(new fabric.Image.filters.Multiply({color: '#F0F'}));
  img.applyFilters(function() {
    img.scale(0.3);
   ...